CSS Photo Zoom - Example 3

Stu Nicholls (Original Design)

Jul 19, 2004

Link to Stu's Magnify Image Page


Stu's CSS Playground Rabbit The CSS Playground

Pure CSS Photo Zoom

Demonstration of the technique




Information:

Stu wrote: "This is an image magnification effect that is similar to the ones produced by javascript."

"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 already displayed at 1px x 1px (so small that you do not see it) then enlarges to it's full size 'instantly' on mouse over."

Notes on the method

Stu's Original Code

CSS

CSS Notes: Though Stu's original code is presented below, I had to modify is a bit, because we each had different colored backgrounds. There is something funky going on with them, but I didn't analyze it ... just got it to work on the page.

/* Photo Zoom CSS */

#zoom { position: relative; top: 10px; left: 10px; width: 75px; background-color: rgb(255, 255, 255); }

#zoom a.p1, #zoom a.p1:visited { border: 0pt none ; background: rgb(255, 255, 255) none repeat scroll 0%; display: block; width: 75px; height: 75px; text-decoration: none; top: 0pt; left: 0pt; }

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

#zoom a.p1:hover { text-decoration: none; background-color: rgb(140, 151, 163); color: rgb(0, 0, 0); }

#zoom a .large { border: 0px none ; display: block; position: absolute; width: 1px; height: 1px; top: -1px; left: -1px; }

#zoom a.p1:hover .large { border: 1px solid black; display: block; position: absolute; top: -60px; left: 150px; width: 300px; height: 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="Thumbnail image" alt="Thumbnail image" /><img class="large" src="cssZoom04.jpg" title="Enlarged view of image" alt="Enlarged view of image" />

</a>

</div>

<!-- end Zoom code -->

This led to: Kimler Caption #1

Click the above link to see this technique with a caption. However, keep in mind that it is the least workable of the three caption methods presented (explanation of 'why' on the linked page). The modifications that were made to Stu's code include: