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!


Screenshot

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

[html]

[/html]

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

The CSS

[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
{
position:relative;
}

/* 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
{
z-index:5;
}

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

/* When the user hovers of the link, show the bigImage */
ul li a:hover img.bigImage
{
visibility:visible;
}
[/css]

Conclusion

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:

[css]
.ie6 ul li a:hover
{
zoom: expression(
this.runtimeStyle.zoom=”1″,
this.parentNode.style.zIndex += 5
);
}
[/css]

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