Streaming live at 10am (PST)

Scale/Transform with overflow hidden


#1

Hello Webflow friends! This is a basic question but I can't seem to figure it out. How do I set a hover transform so that the photo inside of a div zooms in but not affect the size of the div? I've tried just using transform scale but it makes the div bigger when I hover.

Appreciate the help! Thanks!


#2

Hi @JoelPaolo

Use overflow : hidden on your div :


#3

Thanks Blaise,

I tried it but it still making the whole div transform. What could I be doing wrong?


#4

DId you set overflow:hidden on the parent of your photo element?


#5

Got it! It's the parent Div that needs an overflow:hidden and the transform happens with the element inside it! Thanks a bunch Blaise! Amazing!


#6