CSS: Image Rollover

By Xah Lee. Date: . Last updated: .

This page shows how to do image rollover with CSS.

Here is a image rollover. Hover your mouse over it.

Here is the HTML:

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

Here is the CSS:

#roll86705 {

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

CSS: Background Image