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

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

CSS Effects

  1. Round Corners
  2. Box Shadow
  3. Text Shadow
  4. 2D Transform
  5. Image Rollover
  6. Background Image
  7. Transition
  8. Animation
Liket it? Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials

  1. HTML
  2. Visual CSS
  3. JS in Depth
  4. JS Reference
  5. DOM
  6. SVG
  7. Web Dev Blog