Images become distorted when mouse over on an image with a hover overlay

Can someone tell me what is causing my images to become distorted when doing a hover overlay? When you mouse over the top left image, the images surrounding it become distorted.

For example, if you mouse over ADT, the ‘my alarm center’, ‘alarm partners’ and ‘arc’ logos all shift by a few pixels and become pixelated.

https://preview.webflow.com/preview/monitor-5?preview=80a582c82ccb85dae26e57b629b19f6e

Section:

Thanks

Pete

Hi @cyberdave ,

I’ve reposted this topic as I couldn’t find a way to re-open the original card.

The reason is antialiasing gets off during the transition. There’s code to force the antialisasing at all time but for your case, you can delete the images, set a unique sub class to each box, and set the images as background, it should make this behavior stop.

Hi Vincent,

Thanks for your reply. I was trying to avoid that because there’ll be around 80 boxes. I’ll try and find the code to force the antialisasing.

Thanks

Pete

Okay Pete try to play with these properties but don’t ask me too much about it… I use them but don’t fully understand them…

<style>
/* Blinking fix */
  .YOURCLASSNAME {
        -webkit-backface-visibility: hidden;
        -webkit-font-smoothing: antialiased !important; 
        font-smoothing: antialiased !important;
        -webkit-transform: translateZ(0) scale(1.0, 1.0);
        transform: translateZ(0);
                    }
</style>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.