▼
Streaming live at 10am (PST)

Overflow hiss fail during transition

#1

Hi all,

I have an image in a block with rounded corners and overflow hidden. On hover img scales to 1.2. On mouse out it scales back to 1.0 (note: why no animation out?).

During animation the block looses it's overflow hidden and applies it on animation end.

See it live https://webflow.com/design/animation?preview=f10638538abf1be30d4310ee1cf5172c

Cheers!
Martin

#2

Hey @MartinB, try adding the transition to the normal class instead of the hover class. When you add transitions to hover classes, CSS get's a little funky. Let me know how that works.

That will fix the transition on mouse out, but not the overflow animation. Still working on that part.

#3

A workaround is having a background image inside a div that has rounded corners - when hovered, the background image size is increased. Transition would still have to be added to the non-hover class.

#4

Thanks, I'll give it a try. But how to trigger on-hover if you don't use a hover class?

#5

I mean you can use a hover class, just don't add a transition to it. Add the transition to the normal class.

#6

Ah! Ok... thanks for the quick response.

#7