CSS: Image Rollover

By Xah Lee. Date:

This page shows how to do image rollover using pure CSS.

Here's a image rollover. Hover your mouse over it.

Here's the HTML:

<div id="imgrollover63391"></div>

Here's the CSS:

#imgrollover63391 {

#imgrollover63391:hover {

The trick is using the :hover pseudo selector.

You can add the :hover pseudo selector to other element, then specify in CSS for the appearance when user hovers over a HTML element.

For a JavaScript version of image rollover, see: JavaScript: Image Rollover.

The background property has many options. For detail, see: CSS: Background Property, CSS Sprites Tutorial

Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.