Seamless Image Rollovers Using CSS

Have you ever noticed how sometimes when you hover over an image, it goes blank for a second, and then it loads the hover image? When you roll back over though, everything is seamless.

Here’s an example of what I mean using my Underground ladder image (broken into two pieces).

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 you how to eliminate that delay using a CSS technique that loads the entire image at once, and displaying a portion of it.

Combine the Image

The first step to getting this to work is combining both halves of the image into one. You can use your image editor of choice to do this, just copy both of the images, double the height, and paste the inactive one above the active one.

The image in the middle should be what you’re going for. Now we move onto the CSS.

The Code

The first step in the CSS is to limit the height of the image to half (basically so only the top ladder shows up).

For purposes of this tutorial, we’ll use a class called .rollover-tut. Since the original ladder image is 153×149, we’ll use this CSS code:

.rollover-tut {
height: 149px;
width: 153px;
display: block;
}

Since we’re making a link, we’ll use the following HTML code:

<a class="rollover-tut" href="#"></a>

At this point, your link should look like the original ladder image, with no hover effect (yet).

To get the hover effect working, we’ll use a CSS property called background-position on the :hover pseudoclass.

.rollover-tut:hover {
background-position: 0 -149px;
}

With the above CSS code, you’re pretty much moving the background image up 149 pixels (remember, the height of one ladder image, or half of both combined).

An easier way to remember is to use the following hover code instead, which will have the same effect as the above, and you don’t have to remember any numbers (hat tip: Art Webb via the comments):

.rollover-tut:hover {
background-position: bottom left;
}

And here’s what you get:

Notice there’s no delay between the hover effect now, since the entire image is loaded at once.

Conclusion

This same technique can be used for pretty much any background image rollover 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 pretty much every link using a background image (and the submit button on my comment form).

Hope you all enjoyed this CSS tip. If you have any ideas for future CSS tip posts, let me know in the comments.

Related posts:

1. How to Hide the WordPress Stats Smiley the Right Way

Written by - Visit Website