CSS Photo-Caption Zoom

"Photo Zoom 3" (PZ3)

April 14, 2006


Pure CSS Photo-Caption Zoom (Version 3)

Demonstration of the technique

Photo-caption Zoom version 3 (PZ3) is significantly improved over its predecessor, PZ2. Version 3 overcomes an Internet Explorer z-index bug. The CSS has been re-written to eliminate the need for resizing images to multiples of 50 pixels. Instead, pixel-perfect widths and heights, for both the thumbnail and zoomed image, are entered directly into the HTML. The end result is the easiest-to-use, most versatile and powerful Photo-caption Zoom ever. It supercedes PZ2, using a lighter, cleaner, more powerful CSS engine.

Specifying the caption width (10px less than the full-sized image width) is a small price to pay for no longer having to resize images. Specifying the parent DIV height/width allows one to determine the thumbnail size, on the fly. IE-specific CSS allows this version to overcome the z-index problems that plagued the version before this one. (Shrink the width of this window down, until the images overlap slightly. Then mouse-over each. See how BOTH pop to the foreground, when moused over? This is something that can't be done in Internet Explorer, using version 2, because of the IE z-index bug.) It means that PZ3 can easily be adapted for a multi-image slideshow or portfolio presentation.

Like PZ2, PZ3 still uses multiple CSS class name toggles for (1) Brdr/noBrdr (border on/off); (2) Cap/noCap (caption on/off); and Link/noLink (cursor active/non-active for when the photo links to a site).

Bottom Line: PZ3 is the same great-looking, pure CSS, XHTML-valid photo-caption zoom, but without z-index problems, the need to resize photos and less CSS code! What's not to love?

Notes on the method

Photo-Caption Zoom 3 (PZ3) Code

CSS

CSS Notes:

  • This is the final production code. You should be able to cut-n-paste it into an existing CSS file.
  • Includes special IE "trick" to avoid IE z-index bug and allow absolute positioning for images floated to the right.

     /* Photo-Caption PZ3 CSS (The Good Stuff) */

.PZ3-l { float:left; margin-right:10px; }
.PZ3-r { float:right; margin-left:10px; direction:rtl; }
  [class~=PZ3-r] { position:relative; }

.PZ3zoom { border:1px solid #369; }
.PZ3zoom a,.PZ3zoom a:visited { display:block;
  padding:0; overflow:hidden; text-decoration:none;
  height:100%; width:100%; }
  [class~=PZ3-r]>a { right:0; }
.PZ3zoom a:hover { position:absolute;
  z-index:999; padding:0; background:none;
  cursor:default; height:auto; width:auto;
  overflow:visible; border:1px solid #369;
  margin:-1px 0 0 -1px; }
  [class~=PZ3-r]>a:hover { margin:-1px -1px 0 0; }

.PZ3zoom a img { border:0; height:100%; width:100%; }
.PZ3zoom a:hover img { height:auto; width:auto;
  border:0; }

a:hover .PZ3cap { display:block;
  padding:2px 5px; margin-top:-5px;
  direction:ltr; background:#369; color:#fff;
  font:10pt verdana,sans-serif;
  text-align:left; }

.noCap a:hover .PZ3cap { display:none; }
.noBdr a img,.noBdr a:hover img { border:0; }
.Lnk a:hover { cursor:pointer; }

/* End Photo-Caption Zoom CSS */

HTML

HTML Notes:

  • This is the XHTML code from the first image, above.
  • The thumbnail size is set with the height/width for the DIV.
  • The caption width (full-sized image width minus 10px) must be set in the HTML, to constrain the size of the full-sized image.
  • The image is not linked to an external site, though it could be. Instead, the link is "killed" using [ <a href="http://randsco.com/blank.html" onclick="return false"> ]. This solution works well for users with javascripting ON and redirects them to a page (blank.html), if it's turned off. (The page says something like - "You appear to have javascripting OFF, it's recommended that you turn it on. Use your browser BACK button to return to the previous page.")
  • In the above example the following toggles are set in the <div> classnames: Brdr/noBrdr; Cap/noCap; Lnk/noLnk.

<!-- start PZ3 code -->

    <div class="PZ3zoom PZ3-l Bdr Cap noLnk" style="width:210px; height:137px;"><a href="http://randsco.com/blank.html" onclick="return false"><img src="http://randsco.com/_img/blog/0604/pz3-1.jpg" alt="PZ3 demo #1" title="" /><span class="PZ3cap" style="width:475px;"> <strong>Morning Light: </strong>The lowest lake in Pioneer Basin (John Muir Wilderness, CA) only a few miles from the <acronym title=" Pacific Crest Trail ">PCT</acronym>.  <em><span style="color:#ccf; background:inherit;">Photo by Brian Ernst</span></em></span>
</a></div>

<!-- end PZ3 code -->

USAGE

I've not yet had a chance to put together a tutorial for PZ3. Installation and usage is similar to PZ2 and until a PZ3 tutorial is completed, you can have a look at the PZ2 tutorial.