Simple CSS Image Rollovers

These demonstrations use good, old accessible IMG elements with a little help from CSS to provide the hover/active images. The hover images are applied to the anchors as background images. During the anchor's hover state, its child IMG element is made invisible, bringing the hover image into view. (The additional active state could be achieved by sliding the anchor background image up or displaying a different one.)

Vertical List

IE5.01/win Note: Although single block anchors would function, this vertical list was too buggy. The method is hidden from it, but works fine in IE5.5+/win.

Horizontal list (floated LIs)

Block Anchors

Plain Block


Block Anchors Floated Left

CSS Image Rollovers

Inline Anchors (a bit limited)

Note: Only this particular vertical-alignment (text-bottom) works the best across most browsers.

Now we can have ImageRollovers controlled by CSS. Isn't that Fancy?