Image rollovers with CSS

Here’s how a plain text link can be converted into a pure image rollover using only CSS. You can see the result on the site’s logo.

If you’re not already familiar with ‘Fahrner Image Replacement’, read Doug Bowman’s article on Using Background-Image to Replace Text. This presented a guilt-free way of using images for titles, although it relied on a superfluous tag to hide the actual text. Not really a concern unless you were an absolute XHTML purist. The bigger problem was with JAWS screen readers, that treated text styled with ‘display:none’ as invisible and skips it.

The Gilder-Pixy Method

The following combines 2 techniques - Tom Gilders text-transform and Pixy’s no-preload rollovers. The former uses ‘text-indent: –10000em;’ to hide the text from view, while the latter changes the position of the background image, rather than loading a seperate image. This means that you have to create an image containing both states, like this. These methods avoid the need to use the Box Model hack, display:none or some convoluted route to preload the rollover state. Its small code, and the rollover is faster. Combining the 2 methods also allows you to use pure images, rather than the text link/background combination (such as A List Apart)

Here’s the code that went into the HTML:

    <div id="logo">
    <a href="/index.php" title="click to go back home">// hicksdesign</a>
    </div>

No presentational markup, its just a plain ol’ text link. Here’s the CSS to go with it:

#logo a {
    text-indent: –1000em;
    background: url(images/logo.png) no-repeat left top;
    width: 64px;
    height: 369px;
    display: block;
    overflow: hidden; /* For nested divs in Safari */
}

\* IE 5 hack \\\*/
#logo a {overflow: hidden;}
\* end hack \*/

#logo a:hover {
background-position: –64px 0px;
}

There are 2 changes to the original code. The addition of the display: block, as the <a> tag will be treated as an inline element rather than a block and nothing will show up. Also, if the rollover is placed inside an absolutely-positioned nested div, Safari throws up a huge horizontal scroll bar (presumably 1000em wide). The overflow:hidden stops this, but needs to be hidden from IE 5 Mac or else the image won’t visible.

Pros and Cons

This method allows you to create image based rollovers, without any need for javascript. Not that javascript is evil, but there are several advantages to using this method:

The only disadvantages are:

Thanks to Tom Gilder and Pixy for creating these methods!

Further Reading:

Dave Shea has written an article on Fahrner Replacement for Digital Web Magazine.

© 2002–23