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 {
 width:128px;
 height:128px;
 background:url(i/tile_A.png)
}

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

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

CSS Effects

  1. CSS: Round Corners, border-radius
  2. CSS: Box Shadow
  3. CSS: Text Shadow/Outline
  4. CSS Triangle, CSS Shapes
  5. CSS: 2D Transform
  6. CSS: Image Rollover
  7. CSS: Background Image, CSS Sprites Tutorial
  8. CSS: Transition Tutorial
  9. CSS: Animation Tutorial
Like what you read? Buy JavaScript in Depth