CSS Photo-Caption Zoom

Kimler Caption no.1

Jan 28, 2005


Pure CSS Photo-Caption Zoom

Demonstration of the technique

Thumbnail imageEnlarged view of image

Here is a demonstration of one possible image + caption magnification method. It is a modification of a method designed by Stu Nicholls.

Just hover your mouse over the thumbnail image to produce a 4x enlarged image. Move your mouse off the thumbnail image to pop-down the enlarged image. The enlarged image is initially displayed at 1px x 1px (so small that you can't see it) then enlarges to it's full size 'instantly' on mouse over.

The modification details are listed below in the notes. It is a pure CSS construct that uses 'absolute' positioning so that the zoomed image & caption do NOT cause the body text to 'flow'. It requires two images, a smaller thumbnail & the larger image, with caption. The modification was also done in a 'liquid' design. Works in IE6(sp2) & FireFox(v1) browsers.

Feedback on other browsers & versions would be appreciated.

Notes on the method

Kimler Caption no.1 Code

CSS

/* Photo Zoom CSS */

#zoom { float:left; position:relative; width:75px; margin-right:10px; }

#zoom a img { border:0pt none; }

#zoom a.p1:hover { background-color:transparent; } /* IE6sp2 needed this to open the large image */

#zoom a .large { position: absolute; width:0px; }

#zoom a.p1:hover .large { border:1px solid black; position: absolute; top: -100px; left: 150px; width:300px; }

/* End Photo Zoom CSS */

HTML

<!-- Photo Zoom HTML Code -->

<div id="zoom">

<a class="p1" href="#" title="thumbnail image"> <img src="cssZoom04thumb.jpg" title="Short 'title' caption." alt="Thumbnail image" /> <img class="large" src="cssZoom05.jpg" title="Enlarged view of image" alt="Enlarged view of image" />

</a>

</div>

<!-- end Zoom code -->