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? I spend 2 years writing this tutorial. Help me spread it. Tell your friends. Or, 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 Object Ref
  5. DOM Scripting
  6. SVG
  7. Blog