Image Hover Loading Problem (Blinking)

Hi,

I face some issues with the hover effect on images.
See here
https://webflow.com/design/goodtime?preview=9c6c2acb5d21b227a5237b1550691472

You can test on the Social Icons or on the Category Images.
Do you see the strange blinking. I guess it does not preload the hover image.

Best,
Phil

Sweet site! Yeah the browser does not download a resource unless it’s visible to the user. What you can do is copy paste these images to the bottom of the website and hide them using Display: None. Then they will be pre-loaded.

Let me know if this works!

1 Like

Nope, did not work. But please check yourself on the ABOUT page. I added the Section ‘Hide’ to the very bottom and put the hover images inside.
Even when I do not put the section on Display ‘None’. It does not work. I guess the browser does not recognize that it is the same image.
Would we great if we can find a workaround, as it currently hurts the UX of the website.

Oops, you’re right. The reason it didn’t work is because background images and images are hosted on servers, so it’s not the same image. The way to make it the same image is if you create div’s and add the hover images as background images for those divs and make them display none.

Try that and let me know if it works.

Here’s another solution using a bit of custom code. If you insert this into an HTML Embed, you can preload specific image URLs:

<style>body:after {
position: absolute; visibility: hidden; overflow: hidden; width: 0; height: 0;
content:

url(https://y7v4p6k4.ssl.hwcdn.net/52f0ed5f7711748d2600007a/52f23d5fadd5fecd1b000968_Product_Cool-Stuff_Hover%402x.png)

url(https://y7v4p6k4.ssl.hwcdn.net/52f0ed5f7711748d2600007a/52f23b01e46dc3cb1b000894_Product_Accessories_Hover%402x.png)

}</style>

For each image you’d like to preload, simply add a new url(path_to_image) line.

-Dan

3 Likes

@thesergie seems to work. I have just tried it out for one hover image. If I find any further problems, I will let you know.
Thanks so far.

1 Like