Image zoom animation withing div

Design help Animations & Interactions
1

I’m trying to create a zoom in effect on a image within the div. Right now if I use the “scale” animation it scales the whole picture. What I’m trying to achieve is something like this https://codepen.io/phileflanagan/pen/GEQapW but instead of mouse hover it should scale when you scroll down the website.

Thank you!

Here is my public share link: LINK
(how to access public share link)

2

Very simple trick.

simple div. Put inside image.
Set overflow:hidden; for the div (Will work for hover, click or by interaction).

hover example

wrapper:

image
image1920×600 247 KB

inner-image on hover:

image
image1920×786 277 KB

and add transition (To get smooth effect):

image
image1394×545 242 KB

Do you have an example? In general, for scroll animation, you should use webflow interactions

1 Like
3

click the image you want to manipulate then Interactions
image