Making A CSS Image Rollover Using Background Position

As explained in the post intro the oldest way (that I remember) to create an image rollover is using good old Javascript. The problem with that is if you don’t use some fairly complicated JS to preload the images your user may experience a delay (depending on their connection) while the rollover image is loaded. Using CSS you can now create rollovers that do not experience that delay.

This method is exceptionally easy, but is something that seems to remain elusive to those new to using CSS. That is why I’m writing this tutorial. We will use the rollover on Celeb O Rama Wallpapers as an example. If you visit you will notice the rollover is very responsive, so let’s look at how it’s made.

Preparing The Images

This is probably the trickiest part. You will need an photo/graphics manipulation application such as Photoshop, Fireworks, or GIMP anything but MS Paint should be fine. This is the tricky part. Create a canvas double the size of one of your images, and place a horizontal guide across the center of your image. You now need to place both images on the canvas, inactive state on top & active state on the bottom. You must make sure they are perfectly aligned too. To explain that better; If your top image is 5 pixels from the top, and 2 pixels from the left then your bottom image must be 5 pixels from your center guide and 2 pixels from the left. Save it out & your ready.

The HTML & CSS

The HTML is very simple, you just need a single element such as a div with an a inside like this:

The CSS is the key to making the rollover work & because both states (inactive & active) are on the same image, they will both load at the same time and it will eliminate the loading delay you could get on the old javascript rollovers. Here we go:

It’s that simple. The first rule adds the image as a background & sets the position to zero which is basically the same as using top left. If you created the image correctly this will show the inactive state first. You also have to add in the width & height of 1 image, not both images together, just 1 image. You also need to set display to block. This is because an a is an inline element & cannot be given a height or width without first changing it to a block element.

The second part uses the a hover to allow the rollover to work in all current browsers (yes, even IE6). You just move the position of the background image by the height you set in the .rollover a css rule. This will then show the active state on hover.

You’re Done

That’s it you’re all done. If you see any form of jumping it means either your position is wrong in the CSS, or if you are sure that is correct, it is that the images were not correctly aligned when saving them. I’ve been creating these rollovers quite a while & you generally never, unless you’re very lucky, get it right the first time.

You can see an example over at Celeb O Rama Wallpapers. As always, any questions or problems let me know & I’ll help as much as I can. 😉

CSSImageRollover