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

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

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

Instagram Hickstagram

  • 11 Nov 2018

    It’s got to the PowerPoint presentation part of Gruff Rhys’ set.

  • 11 Nov 2018

  • 06 Nov 2018

    The light falling on @matthamm this afternoon was like a renaissance painting

  • 02 Nov 2018

    Vector illustration of a Tufted Duck, using @affinitybyserif Designer on the iPad Pro (+ Pencil). This app is a game changer, letting me do the kind of work I’d normally need a desktop computer and a Wacom tablet for. #illustration #birdillustration

  • 01 Nov 2018

  • 01 Nov 2018

  • 31 Oct 2018

    Inktober Day 31: last day! @hicksmade and I decided to finish on a joint drawing using the Inktober logo as the basis. It’s been really fun to do this together, and I never thought we’d manage to keep it up to the end 😊 #inktober #inktober2018 #leighandjondoinktober

  • 30 Oct 2018

    Inktober Day 30. Almost there! @hicksmade drew our retriever Olive, who was named after “Olive the other Reindeer” by J Otto Seibold. This is Olive, with Martini the Penguin, on their way to the North Pole. #inktober #inktober2018 #leighandjondoinktober

  • 29 Oct 2018

    Inktober Day 29. Taking the theme of ‘lies’ from @hicksmade’s post today, here’s a generic picture of a liar. No one particular in mind… #inktober #inktober2018 #leighandjondoinktober #liar

  • 29 Oct 2018

    Inktober Day 28. From @hicksmade’s Willo the Wisp character to its narrator, Kenneth Williams #inktober #inktober2018 #leighandjondoinktober

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