Image rollovers with CSS

10 Aug 2003

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 <span> 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.

Recent Posts

Hiding Away

16 Sep 2018

Biro sketch of Lauzerte

23 Aug 2018

Firefox Identity Project

21 Aug 2018

It’s just fashion

26 Jun 2018

The Symbol Sourcebook

08 Jun 2018

Differences between Icon and Logo Design on This is HCD Podcast

10 Apr 2018

Twelve South PencilSnap

01 Apr 2018

The Infinite Canvas

09 Feb 2018

Blade Runner 2049

14 Oct 2017

Instagram Hickstagram

  • 14 Sep 2018

    When horses dress up as cows

  • 07 Sep 2018

    Olive’s feeling autumnal

  • 06 Sep 2018

    Going, going …

  • 27 Aug 2018

    Day out MTBing in the Forest of Dean. Bloody knackering climbs and exciting downhills - woohoo!!

  • 23 Aug 2018

    Interesting cloud formations tonight. The whole sky had parallel lines

  • 14 Aug 2018

  • 14 Aug 2018

    Everything’s going to be OK!

  • 14 Aug 2018

  • 12 Aug 2018

    Curry wurst, at last!

  • 12 Aug 2018

    Wheels new and old

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Hicks
Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom