This CSS tutorial is designed to stop the flickering of hover images on first load. I encountered the problem while converting a Photoshop web design into a WordPress powered website for Caroline Larsson. The hover images for the social icons were not loading smoothly until the second visit to the website. On the second load, the browser already has the images in cache so you won’t notice the hover image flicker.

This is how the image icon should look when you hover over. The effect adds color to the image. Just a simple swap.

Here is an example of the blank flickering that happens to the background hover during the first instance. It’s very brief but noticeable.

Step 1 — Place this in your CSS file:

div#preload { display: none; } 

The display none property will effectively load the images but not display them. The div is invisible.

Step 2 — Place something like this at the bottom of your (X)HTML document before the body tag:

<div id="preload"> 

<img src="http://domain.tld/img01.png" width="1" height="1" alt="Image" /> 

<img src="http://domain.tld/img02.png" width="1" height="1" alt="Image" /> 

<img src="http://domain.tld/img03.png" width="1" height="1" alt="Image" /> 

</div>

Edit the code to include your background hover images. The images in this div should be the images that show up when you hover the navigation links. The dimensions are only set to 1 pixel so that they are as small as possible in case a browser does not load as expected.

Step 3 – Preloading images is just that simple

That’s it! You’re done and your site is now slightly more professional. This should not be hard to do. You are only adding the one line of css for the preload div ,and placing the preload div with images into your HTML.