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
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.
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.
Thanks, I’ll give it a try. But how to trigger on-hover if you don’t use a hover class?
I mean you can use a hover class, just don’t add a transition to it. Add the transition to the normal class.
Ah! Ok… thanks for the quick response.
