CSS: Image Rollover

By Xah Lee. Date: . Last updated: .

This page shows how to do image rollover with CSS.

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

Here's the HTML:

<div id="roll86705"></div>

Here's the CSS:

#roll86705 {
 width:128px;
 height:128px;
 background:url(i/tile_A.png)
}

#roll86705:hover {
 background:url(i/tile_B.png)
}

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: Image Rollover .

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

JS in Depth
XAH  BUY NOW

CSS

Basics

Color

Font

Text Decoration

Box Model

Box Decoration

Layout

Layers

Transform/Animation

Line Wrap

Misc