Picture zooming out not in when hovering, why?

Design help Layout & Design
1

I am trying to make a zooming in effect on a picture, when hovering - like this How To Create A Zoom-In On Hover Interaction In Webflow - YouTube, but my picture is just growing in size, not zooming in within the div block. Also in only does it ones and does not go back to normal see on hover out.

Bear with me - animation is brand new to my!

Hope you can help (the picture is a the very buttom of the page of the “Blog post template”). Hope you can find it!

Here is my site Read-Only: [LINK][1]
([how to share your site Read-Only link][2])

[1]: Page:Blog Posts Template

https://preview.webflow.com/preview/majas-stupendous-site-1e9d4a?utm_medium=preview_link&utm_source=designer&utm_content=majas-stupendous-site-1e9d4a&preview=3a4b4926dd4df0dea438d5a93259c709&pageId=633b4b8b8a7958d213fdbd57&itemId=633b4b8b8a795838f3fdbdad&workflow=preview
Publish
[2]: Share a read-only link | Webflow University

2

Hi @Maja_Veis,

You should be able to fix this by setting the ‘picture-wrapper’ element to overflow: hidden!

To get the animation to reset, you’ll need to duplicate the animation and set the element to go back to scale 1:1 then apply this as the On Hover Out animation.

Here’s a quick screen recording: CleanShot 2022-12-14 at 14.01.21 · CleanShot Cloud

Hope this helps!

3

ah thanks! I will try it out later :slight_smile:

4

yearh, works. easy to understand with the screenrecord. Thanks!

1 Like