Richard Parnaby-King

Web Developer – PHP, Zend Framework and Actionscript 3

Posted on | | No Comments

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:

  • Have two images – one small, one large – and hide the large image the user hovers over it
  • Have one large image, use CSS to make it appear smaller, and show the full size image when the user hovers over it

In this post, we will investigate the first method.

Live Demo

The Markup

[html]


  • Product name
    Product name

    Short description for product

    £00.00

[/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+.

Category: CSS, HTML

Posted By:

Comments

  • ABOUT

    Having fifteen years of programming experience in PHP, Zend Framework and ActionScript3, I have a very strong working knowledge of object orientated programming.

    I am a PC Gamer! Playing FPS, RTS, RPG and the occasional MMO since 1996 I have a huge number of a variety of fast-paced games.

  • Recent Posts

  • Categories

  • RSS SUBSCRIBE TO OUR FEED