>

Zoom On Hover

Zoom On Hover

Zoom On Hover

Here's a zoom on hover effect created in Framer without the need for any code. Feel free to remix it and use it in your next project!

Zoom on hover effect in Framer
Zoom on hover effect in Framer
Zoom on hover effect in Framer

This simple zoom on hover effect is applied to the entire card, ensuring that the image zooms slightly even when hovering over the text.


The effect is achieved by expanding the image on hover to be slightly larger than its container, without displaying any overflow.


In practice, you would set the container to have fixed dimensions, and the image to occupy 100% of the container's size when inactive, and 105% when hovered over.


This creates a subtle zoom effect that enhances the card's visual appeal.