Return to Snippet

Revision: 9738
at November 19, 2008 07:06 by kcmr

Initial Code
The image contains the two states for the rollover (hover or normal) like we will do using a background image with CSS.

We need to wrap the image in a <span> element with the following styles:
   display: block;
   width: "same as visible area of each state (normal or hover) of the image";
   height: "same as visible area of each state of the image";
   overflow: hidden;
   position: relative; // IE needs it

The <img> element is wrapped by an <a> element. We need the following styles to the a:hover:
   position: relative;
   top:  "negative position same as height of the image visible area"

HTML code:
   <span class="img-rollover"><a href="#"><img src="image.gif" alt="" /></a></span>

CSS code:
   width: 20px; 
   height: 20px; 
   display: block; 
   overflow: hidden; 
   position: relative;
   span.img-rollover a:hover{
   top: -20px; 
   position: relative;

Demo at

Initial URL

Initial Description

Initial Title
Image rollover () without javascript

Initial Tags
css, html

Initial Language