Interaction
Repeat Image Hover Effect in Framer
About the resource
To create this hover effect, I first built a component with two variants: Default and Hover. Inside the component, I added four image layers and stacked them using absolute positioning. I arranged these images behind each other by adjusting their Z-index.
Next, I used the scale property to animate the effect. In the Hover variant, I scaled the top three images down to 0, making them disappear. To create a smooth transition, I applied a minimal delay to each image’s transition—elements positioned further back had a longer delay.
Finally, I set the rearmost image (background image) to start at a larger size in the Default state and then shrink to its original size in the Hover state, creating a subtle zoom effect.
About the resource
To create this hover effect, I first built a component with two variants: Default and Hover. Inside the component, I added four image layers and stacked them using absolute positioning. I arranged these images behind each other by adjusting their Z-index.
Next, I used the scale property to animate the effect. In the Hover variant, I scaled the top three images down to 0, making them disappear. To create a smooth transition, I applied a minimal delay to each image’s transition—elements positioned further back had a longer delay.
Finally, I set the rearmost image (background image) to start at a larger size in the Default state and then shrink to its original size in the Hover state, creating a subtle zoom effect.
About the resource
To create this hover effect, I first built a component with two variants: Default and Hover. Inside the component, I added four image layers and stacked them using absolute positioning. I arranged these images behind each other by adjusting their Z-index.
Next, I used the scale property to animate the effect. In the Hover variant, I scaled the top three images down to 0, making them disappear. To create a smooth transition, I applied a minimal delay to each image’s transition—elements positioned further back had a longer delay.
Finally, I set the rearmost image (background image) to start at a larger size in the Default state and then shrink to its original size in the Hover state, creating a subtle zoom effect.
Two variants of the component.
Two variants of the component.
Two variants of the component.
With the two variants set up, I simply linked them using a hover interaction—and that's it!
With the two variants set up, I simply linked them using a hover interaction—and that's it!
With the two variants set up, I simply linked them using a hover interaction—and that's it!
