HTML Dog

Skip to navigation

Rollovers

Rollovers are a fine old tradition in web design. They basically involve changing one thing to another thing when the cursor hovers over it. If you use an image for a link, for example, you could swap that image with another one when it is hovered over. Here are some methods for achieving this goal, including some CSS3 effects that have expanded the possibilities of modern rollovers.

When the third link is “rolled over”, a faded image is swapped with a solid one.

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.

Rollovers manipulating border-radius.