Have you noticed that sometimes when you hover over an image, it goes blank for a second and then loads the image you hovered over? However, when you hover over it again, everything is perfect.
This is because there are two separate images that need to be loaded, and the second one (on hover) takes extra time to load when the hover effect is triggered.
In this post, I'm going to show how to eliminate that delay by using a CSS technique that loads the entire image at once, and displays a portion of it.
Combine the image
The first step to make this work is to combine both halves of the image into one. To do this, you can use any image editor you like. Just copy both images, double their height, and paste the inactive one on top of the active one.
Ladder 1Ladder 2
Underground Ladder
The middle image should be the one you're looking for. Now we move on to the CSS.
The code
The first step in CSS is to limit the height of the image to half (basically so that only the top ladder appears).
.rollover-tut {
altura: 149px;
anchura: 153px;
display: block;
}
Since we are making a link, we will use the following HTML code:
<a class="rollover-tut" href="#"></a>
At this point, your link should look like the canada number code list original ladder image, without the hover effect (yet).
Ladder 1
In order for the hover effect to work, we will use a CSS property called background-position<hover> in the pseudo-class :hover.
.rollover-tut:hover {
background-position: 0 -149px;
}
With the CSS code above, you'll be offsetting the background image by 149 pixels (remember, the height of a stair image, or half of the two combined).
An easier way to remember is to use the following hover code instead, which will have the same effect as above, and you don't have to remember any numbers (hat tip: Art Webb via comments):
.rollover-tut:hover {
background-position: abajo a la izquierda;
}
And this is what you get:
Notice that there is now no delay between the hover effect, as the entire image loads at once.
Conclusion
This same technique can be used for almost any rollover background image effect. I'm not sure if any of you have checked out my personal blog design lately, but I make extensive use of it on almost every link that uses a background image (and the submit button on my comment form).
I hope you enjoyed this CSS tip. If you have any ideas for future CSS tips, let me know in the comments.