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 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


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

1 Like

click the image you want to manipulate then Interactions