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

Using the iPad Pro as my main computer

07 Jan 2019

Hicks' top albums of 2018

22 Dec 2018

Hicks Studio Clearout!

17 Dec 2018

New Identity for iHasco

13 Nov 2018

Leigh and Jon did Inktober

01 Nov 2018

We are Oxvik

15 Oct 2018

The Hicks Logowall

05 Oct 2018

Hiding Away

16 Sep 2018

Biro sketch of Lauzerte

23 Aug 2018

Instagram Hickstagram

  • 13 Jan 2019

  • 05 Jan 2019

    Just tried the Vegan Sausage Roll from Greggs. Really good - nicer than the meat one, and the thought of Piers Morgan frothing at the mouth makes it even tastier

  • 30 Dec 2018

    Blackbird studies #ipadpro #procreate

  • 27 Dec 2018

    My special egg plinth from @maanthh. You have to say the name in the style of Matt Berry in the IT Crowd ✊

  • 26 Dec 2018

    This is my Pencil. There are many like it, but this one is mine. #applepencil

  • 25 Dec 2018

    Christmas reading 🤗

  • 24 Dec 2018

    Hope you all have a very Happy Christmas folks! 🎄🎉🍸

  • 22 Dec 2018

    The moon tonight was full and large. Taken through a spotting scope with iPhone, hence a bit blurry

  • 21 Dec 2018

    It’s that time, here are my top 9 albums of 2019! 7 - Beach House Columbus (Original Motion Picture Soundtrack) - Hammock The Appearances - Ester Drang The Art of Pretending to Swim - Villagers Twenty Two in Blue - Sunflower Bean In Transit - The Amazing Vide Noir - Lord Huron Marauder - Interpol The Great Untold - Scott Matthews

  • 20 Dec 2018

    Another new music genre

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