CSS Photo Zoom - Example 2

Paul Griffin (Original Design)

Aug 25, 2003

Link to Paul's Photo Zoom Page

Pure CSS Photo Zoom

Demonstration of the technique

Some Cacti

Paul was inspired by Dan's post over at Simplebits. He used some simple CSS to make a thumbnail image 'pop' to its full size when the mouse hovers over it. The CSS and HTML code are below, and also in the this page source.

Here is Paul's contribution to the fray. It has several major improvements, compared to the original 'proof-of-concept' method by Dan Cederholm. First, it uses the exact same image for both the small & large photo. Second, there isn't any background image shifting involved, so there aren't any calculations required for images of differing sizes. The method Paul documented is elegantly simple.

Integer auctor. Curabitur imperdiet porttitor diam. Mauris malesuada, magna nec posuere vulputate, quam est fringilla tortor, vitae blandit arcu nulla eu urna. Phasellus non dolor ac libero tempor porta. Aliquam non quam sed eros bibendum dictum. Aenean dui nunc, volutpat non, accumsan at, nonummy id, pede. Donec dui neque, placerat sit amet, imperdiet vel, sodales et, dui. Quisque feugiat adipiscing wisi. Suspendisse rutrum. Maecenas eget ipsum. Fusce vel libero. Suspendisse sodales, lectus et vulputate porta, urna nibh molestie orci, vel consequat dui sapien eu erat. Mauris mi. Proin felis nunc, tincidunt nec, iaculis a, congue vitae, nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eros felis, fringilla eget, venenatis non, mollis eget, tellus. Etiam massa risus, ultricies vel, scelerisque in, mollis a, enim. Aenean rutrum dolor a justo.

Notes on the method

  1. Define only the width or height - not both,
  2. Define the width or height in the HTML code (to accomodate different image sizes on the fly, rather than bloating the CSS file).
  3. Add a caption.

Paul's Original Code

CSS

/* Photo Zoom CSS */

#zoom a img { float:right;
height:94px;
width:125px;
border:1px solid #000;
margin:0 0 5px 5px; }

#zoom a:hover img { width:300px;
height:225px; }

/* The rule below makes the effect work in IE */
#zoom a:hover { padding:0; }

/* End Photo Zoom CSS */

HTML

<!-- Photo Zoom HTML Code -->

<div id="zoom">

<a href="cssZoom02.jpg"> <img src="cssZoom02.jpg" alt="Some Cacti" /> </a>

   .

   .

   .

<div>

(Note: Paul wrapped his <div> around his text - so the closing </div> isn't till later.

<!-- end Zoom code -->

This led to: Kimler Caption #2

Click the above link to see this technique with a caption. It is the best pure-CSS caption method presented and IMO, the second best solution overall. (Explanations 'why' are on the linked page). The modifications that were made to Paul's code include: