CSS Rollovers
by Sam Kellett, aka Halikidiki : 19 January 2005

Now being one myself, I'm pretty sure that all web designers at some point in their designs life has wanted to make one image change to another when the mouse is rolled over (generally used with links). The most generic way of achieving this is to use JavaScript and there are plenty of tutorials around. But you (if you're anything like me) gets stuck somewhere in the tutorial, skips straight to the end to get the code and then just copy and paste into your website. Now with this working and all, you don't understand why it works. Or if anything goes wrong how can you fix it? CSS rollovers are much more simple and don't require anything except CSS and HTML (not even for preloading).

This tutorial will take you through how to make anchor tags into linked pictures and then the picture changing when the mouse is on top of the image.

This is an example of what I'm about to show you how to do:


[ move your mouse over to change the image]

Here is How
The following steps will explain how you can achieve this effect.

  1. Open up the HTML document you want a CSS rollover in (or use this HTML code if you just want to experiment with the effect):

    <title>CSS Rollovers</title>
    <style type="text/css">
    @import "rollover.css";
    <a href="#" id="example">Home</a>
  2. You don't need to worry about any of that code (you should easily understand it all anyway) apart from the anchor tag and what's inside the style tag.

  3. Save your HTML file.
  4. Open up FrontPage/DreamWeaver/Notepad (whatever you prefer to use) and paste this CSS:

    height: 20px;
    width: 158px;
    text-indent: 10000px;
    overflow: hidden;
    background: url(kirupa1.gif) top left no-repeat;
    display: block;
    background-position: bottom left;
  1. For the sake of this tutorial, call the file rollover.css and save it in the same directory as your HTML file.

  2. Now this is where this differs majorly from using JavaScript. For a rollover you have two images, one for the original state and one for the rollover state. When using CSS rollovers you need to put both images in the same image, like so:

[ both rollover states in one image ]
  1. Save that image as kirupa1.gif in the same directory as the HTML + CSS files. Then view your HTML file and voila!
    Now...time to go through that code!
  2. #whatever is referring to an id called whatever, same as classes but should only be used once on a HTML document.

  3. The dimensions of kirupa1.gif are 158px by 40px. But as half of that height is an image we don't want to see (yet), we set the height to 20px, and later on we set the background-position to top.

  1. For browsers that can't view CSS (yes, I know...) you should always include some text in-between the open and close anchor tags. For those browsers that can view CSS we need to get rid of that text. So we set the text-indent to some huge number and set the overflow as hidden. Self explanatory.

  1. The last two lines in the #example {} simply called the background image, telling it to place itself at the top and also not to repeat itself.

  2. Next is the #example:hover -- the hover is basically saying when the mouse is over this element style it like so.

  3. All this does is change it from showing the top 20pixels to showing the bottom 20pixels, effectively switching the images.

Well done! You have successfully created some pure CSS rollovers! It is much simpler than using JavaScript, and because it's not needing to load a second image when the mouse rolls over you have no need to use JavaScript to preload the image.

Compatibility Note
As I'm sure you all know IE, Firefox and Opera all run on different engines. FF and Opera, by default, display CSS background images to the left, but IE doesn't. So we have to add the left in each of the positioning bits of the CSS so that IE will align it within the area we specified. If it isn't then the image doesn't show up, the reader thinks there's not a link there but gets confused when the empty bit of space sends him to another page ^_^
Download ZIP of Files

If you find any problems with this tutorial, or you want help with this effect don't be afraid to PM me or just post on the forum.

Thanks! =)

Sam Kellett





kirupa.com's fast and reliable hosting provided by Media Temple.