ImageRevealCard
It reveal hidden visuals on hover with a smooth mask animation. Perfect for before/after showcases, product previews, or adding interactive motion to your Framer design.
Made with Workshop
Build your own component with AI
It reveal hidden visuals on hover with a smooth mask animation. Perfect for before/after showcases, product previews, or adding interactive motion to your Framer design.
Made with Workshop
Build your own component with AI
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.
