Richard Parnaby-King

CSS Only Image Zoom

This is a nice simple effect that is used on a damned lot of websites: The image zoom!


Basically, move your mouse over the image to see a larger image.

There are two approaches to this:

In this post, we will investigate the first method.

Live Demo

The Markup



This is a basic list of products, with a small image, a short description and a price. The bigImage is hidden using CSS.


/* When using position:absolute on child elements, use position:relative on parent elements; otherwise the child is positioned to the browser window */
ul li

/* subsequent list items would appear over the hovered image. What we are doing is lifting our hovered item above all of them */
ul li:hover

/* Hide bigImage and position as necessary. */
ul li a img.bigImage {
left: -25%;
position: absolute;
top: 0;

/* When the user hovers of the link, show the bigImage */
ul li a:hover img.bigImage


This approach works in Firefox, Opera, Chrome, and IE7+, and is 100% javascript free.

Extra Credit

This will not work in IE6 because of it’s rendering engine. The problem is that unless a property on the anchor is changed, IE6 will not re-render any of the child elements. Daft, I know, but it’s IE6.

The fix is to use an expression (dirty, dirty, don’t do it!) to a) re-render the anchor element, and b) force a z-index on the li:

.ie6 ul li a:hover
zoom: expression(
this.runtimeStyle.zoom=”1″, += 5

An expression is the same as using javascript in a css file. Fortunately they were removed from IE8+.