Docs

[Mfristoff]

Hello,

I’m trying to do an image-swap upon hover for this page: http://sensiblemicro.com/homepage-tester-1-2/

As you can see, the first few times that you hover with the mouse, it seems to glitch/flicker…

Here’s the CSS that I’m using on this page:

.my-image-class-1:hover {
content: url(http://sensiblemicro.com/wp-content/uploads/2016/08/Shortages-EOL-Full-Color.png);
z-index: 999;
width: 100%;
}

.my-image-class-2:hover {
content: url(http://sensiblemicro.com/wp-content/uploads/2016/08/Quality-Lab-Sensible-Micro-Color.png);
z-index: 999;
width: 100%;
}

.my-image-class-3:hover {
content: url(http://sensiblemicro.com/wp-content/uploads/2016/08/Authorized-Full-Color.png);
z-index: 999;
width: 100%;
}

.my-image-class-4:hover {
content: url(http://sensiblemicro.com/wp-content/uploads/2016/08/Mobile-Kiosks-Sensible-Micro.png);
z-index: 999;
width: 100%;
}

.page-id-36410 .x-section .x-container.marginless-columns .x-column.x-1-5 {
    width: 20% !important;
    float: left;
}

Any and all help would be greatly appreciated!

Thanks,
Mike

[Rupok]

Hi Mike,

Upon checking your site; I can’t see any flickering for the images and it’s changing smoothly as I can see.

Thanks!

[Mfristoff]

Could you possibly try in an incognito window or in a diff browser? I’ve tried on 4 different computers now (2 on diff networks), and the problem is still persisting.

Please help!

[Nabeel A]

Hi again,

Use background image instead and change it on hover for example:

.my-image-class-1 {
background-image: url('original-image');
}

.my-image-class-1:hover {
background-image: url('hovered-image');
}

Hope this helps!

[Author]

Posts