Why does a fresh cleared browser make my landing page blink on the hover interaction?

If you look at my Landing Page, noticed how the icons dissapear for a moment and come back with the right image set in the hover jpeg? Is there a way to have the hover jpeg preload fully so when people click on the page for the first time does not look broken? Again… its the landing page, i just make a simple hover interaction and added a slight blueish background.

http://pixelcell-186afcb91866b17-299501dbf4c2b.webflow.io/architecture

Add the hovered jpegs as a second background of the normal state, under the normal background. This way they’ll load with the rest on loading.

You mean like just add the hover jpg to the “none” state ? But i just tries that. No effect what so ever… actually i got it to go. That was the solution! Thxs.

Cool :slight_smile: Yes it forces the image to load.

there are MANY techniques for ensuring hover assets loads. One very used it to make you 2 states in one image, one under another. Then you use placement of background to only show the portion you want for each state. In some cases you can then even use motion as a transition.

other techniques rely on putting the images on another element, almost hidden (1px) or hidden with opacity.

Also, there are JS solutions for preloading.

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