Images With Hover Effects

For many years hover-effects on images working as links has been accomplished by using JavaScript. They worked 5 years ago and they still do - at least for those who still haven't disabled (partially or completely) JS. According to W3Schools Browser Statistics, about 10% have JS completely disabled. I bet that an even higher percentage are people who have partially disabled JS.

The method I'll demonstrate here requires nothing but basic support for images and CSS, as well as supply a usable alternative to those who don't (text-only browsers, mobile phones, website readers for people with disabilities, etc).

The image

In this example we'll use these two images:

Normal Hover

The first one is the normal state and the second is the image displayed when the mouse hovers over it. Both are the same size - 100 x 50px.

There are two ways of making a hover-effect using CSS. The first one is to simply change the background-image attribute from button1.gif to button2.gif (the hover-image). The bad thing is that button2.gif isn't downloaded until it's actually needed. The user hovering the link will experience a delay of a few seconds (depending on the size of the image and the user's connection) when hovering the link for the first time, while the browser downloads the image. This may not seem like a big problem, but there's an easy way to avoid it: If we take the two images above and "glue" them together into one single image file, there won't be any delay, because (obviously) it'll have no choice but to download the whole image. Here's how the image should look like:

Normal and hover

As you can see I've made the image twice as high so both the hover state and the normal state fits perfectly. Only thing left is to use CSS to decide which part of the image to display where and when.

The HTML

As you can see, there is no <img>. That's because we'll use the image as a background in the a. It's important to have a link text as if it was a normal link. That way people with older, text-only browsers or similar will also be able to see and click the link - with or without the image. I've put the text inside a <span>-tag so it'll be easy to hide it with CSS.

The CSS

a.imageLink {
display:block;
background:url(path/to/image.png) top no-repeat;
width:100px;
height:50px;
text-decoration:none;
}
a.imageLink:hover {
background-position:bottom;
}
a.imageLink span {
visibility:hidden;
}

First of all we define the a as a block element with a spesific size (the size of the top- or bottom half of the image seen above) and the background is set to the image that contains both the normal and hover state image. top no-repeat makes sure the background image is positioned at the top and doesn't repeat itself, as it would by default.

a.imageLink:hover contain the changes done when the mouse hovers the link. The only thing happening is that the background position is changed from top (in it's normal state) to bottom.
a.imageLink span simply tells the browser to hide any span-element inside this specific link. This way modern browsers with CSS support will display the image and not the text, and browsers with no support for CSS will simply display the text as if it was a normal link.

Example

For a demonstration of how this would look when finished, take a look at the example.