Flickering elements on hover with scale transforms

Hello,

I was wondering if it would be possible to not have images flickering when hovering over them? I actually made the image scale down a bit on hover, but this small issue looks a bit odd. Maybe the problem is that I used transparent png for the image? I’m sure it’s somehow my fault, since I’m still new around here, I just can’t figure what.

Hey @Papaia :wave: Welcome to Webflow! :webflow_heart:

If you could share your read-only link here then we will be able to see what could be causing the issue you’re seeing, and hopefully be able to help.

Awesome thank you.

So you can add a transition to the hover to stop it happening instaneously which will help reduce the flickering… here’s a quick video showing you how to do that.

Here’s a Webflow University article explaining transitions in more detail. This isn’t a Webflow feature as such, but is part of the CSS spec on which the designer is based.

Hope that helps!

1 Like

@magicmark wow, thank you so much!

You’re very welcome. Have a play around with those settings to see what you can do :slight_smile:

One tip to remember is to try and avoid mixing those kinds of CSS interactions (like the one you created) with the Interactions panel (IX2) as they can conflict with each other.

Happy deisgning!

1 Like