Skip to content

component

ImageRevealCard

By Vivek Saroj

Details

Summary

imagerevealcard.framer.website/ Ideal for before-and-after comparisons, design showcases, or product previews, this component makes interactions feel natural and elegant.

Description

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.

Introduction

Reveal hidden visuals on hover.

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400152978/148/228/309/79/15
  • All · #5242