Rollovers

Image swapping

The earliest rollovers used JavaScript to swap one img element with another. Then CSS came along and, using :hover, we could more easily change a background image used in place of a text link. Cleaner, simpler, more semantic, and nice and accessible.

An obvious solution for achieving this would be to do something like this:

a {
    display: block;
    width: 200px;
    height: 63px;
    background-image: url(images/toucanfade.jpg);
    text-indent: -999em;
}

a:hover {
    background-image: url(images/toucan.jpg);
}

The link text is pushed out of the way, an image (“toucanfade.jpg”) is plonked in its place, and that image is swapped (with “toucan.jpg”) when the link is hovered over.

The trouble with this is that there will be a delay when the link is hovered over, as the image for the rollover downloads, making the effect far from instantaneous.

The way to get around this is to actually have just one image that comprises the two images you want, one on top of the other.

This image can be manipulated with the following CSS, which achieves the same result as the previous example, but because there is only one file involved, containing “two” images, everything necessary for the rollover is downloaded at once, making the effect instantaneous.

a {
    display: block;
    width: 200px;
    height: 63px;
    background-image: url(images/toucancombo.jpg);
    text-decoration: none;
    text-indent: -999em;
}

a:hover {
    background-position: bottom;
}

The technique can be extended further by accommodating other link states such as active and having an image file with additional portions.

Fade in / fade out

CSS won’t let you change the opacity of background images. If it did, you could apply two background images to a link and change the opacity of one from transparent to solid on hover. Accompanied by a cheeky transition this would achieve a smooth fade-in / fade-out effect.

We can, however, alter the opacity of a box containing a background image. So if we have two boxes, one on top of the other, we can achieve the same thing:

#toucan {
    display: block;
    width: 200px;
    height: 63px;
    background: url(images/toucancombo.jpg);
    text-indent: -999em;
    position: relative;
}

a:after {
    content: "";
    display: block;
    width: 200px;
    height: 63px;
    background: url(images/toucancombo.jpg) bottom;
    position: absolute;
    top: 0;
    opacity: 0;
    -webkit-transition: .5s;
    transition: .5s;
}

a:hover:after {
    opacity: 1;
}

Here we’re creating another area for styles to play with using :after, so leaving the HTML untouched. We’re placing this box on top of the link, filling it with the desired rollover image, hiding it, and setting our transition. Then, when the link is hovered over, this invisible box becomes visible. Bam. Rollover.

Other options

There are plenty of rollover noodling opportunities that don’t involve swapping images. When a link is hovered over you could, for example, change its shape by manipulating border-radius, rotate it with transformations and go wild with all kinds of animations using transitions.