How to fix mouse :hover background blinking

Let the title not confuse you, i will be quick to explain. I believe most of us have run into the following problem:

1. You decided to use navigation with images
2. You designed a very nice looking ‘effect’ for the :hover
3. You applied the styles using CSS
4. And finally, when you mouse over the image, first blinks and later goes the transition.

Why is that happening? Don’t know and i have not been reading much about it, but the fix is here.

Particulary, the problem may be caused because IE and FF does not load the background images who are meant to appear when you mouse over certain element and it takes time for them to load when you do that.

Apparently, the fix i know about it made me think that, why? It is well explained bellow me thinks.

Try to point your mouse over this image. I am assuming that the annoying blink will take effect:

(Please note that the image will blink only the first time, because it’s then when loads. Also, if you refresh this page, the image might not blink even from start because i am using caching)

But when you point over this one… It goes nice and neet.

You can also use it as an image link, try it:

link to mr-wordpress

The coding explanation:

If you are getting the blinking, it means you are using this kind of code:

</p>
<p>.theImage {</p>
<p>background:url(PATH-TO-IMAGE.jpg);</p>
<p>width:100px;</p>
<p>height:100px;</p>
<p>}</p>
<p>.theImage:hover {</p>
<p>background:url(PATH-TO-HOVER-IMAGE.jpg);</p>
<p>}</p>
<p>

Basically, you are using 2 images to do your :hover effect, as it was with the first case in this post - i used this images:

The key to the solution, is to use just 1 image and the background-position css property.

</p>
<p>.theImage {</p>
<p>background:url(PATH-TO-SAME-IMAGE.jpg);</p>
<p>background-position:top;</p>
<p>width:100px;</p>
<p>height:100px;</p>
<p>}</p>
<p>.theImage:hover {</p>
<p>background:url(PATH-TO-SAME-IMAGE.jpg);</p>
<p>background-position:bottom;</p>
<p>}</p>
<p>

As it was with the second example in this post. I used just this image:

It is a single image, where the two separate are stick together.

Should you have any question, feel free to post your comment or contact me.