ImageRevealCard
The Image Reveal Card brings subtle motion and storytelling to your designs. It allows you to showcase two images within one frame — when users hover over the card, a second image is revealed using a smooth mask animation.
Live preview - https://imagerevealcard.framer.website/
Ideal for before-and-after comparisons, design showcases, or product previews, this component makes interactions feel natural and elegant. You can fully customize how the reveal behaves to match your visual style.
Customizable Options:
Primary Image & Hover Image — Add your two visuals easily
Animation Direction — Choose from top, bottom, left, right, or radial reveals
Animation Duration — Fine-tune the speed of the reveal
Easing Type — Control how the animation feels
Corner Radius & Shadow — Refine the card’s visual depth
Mask Type — Switch between linear and radial masks
Caption Support — Add custom text with font and color options
Hover Scale Effect — Add a subtle zoom for extra motion
This component is responsive, lightweight, and built for Framer creators who want to add motion, depth, and interactivity to their designs effortlessly.
Vivek Saroj
