Streaming live at 10am (PST)

Image zoom animation withing div

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)

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:

inner-image on hover:

and add transition (To get smooth effect):

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

click the image you want to manipulate then Interactions
image