Images with a rollover effect are easy to make with the use of javascripts onRollOver function. However, it doesn’t work with javascript disabled. Luckily this is also possible with CSS.

My favorite way to do this works with an image that contains both the rollover and the normal state of the image, thus making it twice as long.

div.imgcontainer {
  width: 50em;
  height : 25em;
  overflow : hidden;
  text-align: left;
}

div.imgcontainer:hover {
  text-align: right;
}

<div class='imgcontainer'>
  <img src='images/image.jpg'/>
</div>

Note that the image container is the width of a single image, while the actual image is double that. When you use ‘overflow: hidden; everything that falls outside of the div will be clipped. Thus showing only the left half of the image. When you hover over the image the alignment of the div changes, showing only the right half of the image.

Another way to make it work

Another way to do this is by putting an image as a background for the div, and a different one for the :hover pseudo class.

div.imgcontainer {
  width: 50px;
  height : 25px;
  overflow : hidden;
  background-image: url('/images/image.jpg');
}

div.imgcontainer:hover {
  background-image: url('/images/imageon.jpg');
}

<div class='imgcontainer'>
&#160;
</div>

This works the same, but it has a downside, the image still has to be loaded once the the mouse is put over the image, making it flicker for a moment. This can of course be solved with preloading in javascript, but were just trying to get rid of javascript.

And a third way

div.imgcontainer {
  width: 50em;
  height : 25em;
  background-image : url('/images/image.jpg');
}

div.imgcontainer img:hover {
  visibility : hidden;
}

<div class='imgcontainer'>
  <img src='images/image.jpg'/>
</div>

This example has a regular image, and it has a background-image which will be hidden by the picture. When you hover over the image tag, inside the div the image is made invisible, showing the background image.

Again, there’s a downside to this method, a background-image is always the size the original image is. While an image from an img tag can be resized just like text, when you set width and height in em. So, this method gives a resizeable normal image, and a fixed size mouseover image.

Take you pick, no more excuses for javascript rollovers.

Related posts

This entry was posted on Tuesday, January 3rd, 2006 at 10:47 by Sonja Duijvesteijn and is filed under Webdevelopment, CSS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.