>

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

Overview


Zooming an image on hover is one of the most used methods in web design to tell the user that clicking on the card/image will trigger a change on the page - and this component does exactly this.


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.

Overview:

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!

Details:

Category

Component

Last Updated

Mar 1, 2024

Join Our Community

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.

Join Our Community

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.

Join Our Community

Receive updates on release dates, products, tips, and tutorials. No spam. Unsubscribe anytime.