CSS Photo-Caption Zoom

"Photo Zoom 3" (PZ3)

April 14, 2006

(v080630)


No-caption Option (Jun 30, 2008) A reader pointed out that the "Bdr|noBdr" toggle still wasn't working. The CSS on this page has been corrected (again).

Version Numbers (Jun 30, 2008) - In an effort to track all the little changes, a dated version number has been added to the CSS file. A quick glance at the version will tell you if you have the "latest version".

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 is a small price to pay for no longer having to resize images. Specifying the parent DIV height/width allows one to determine an infinite number of thumbnail sizes, 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. They 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 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?


UPDATES

June30th, 2008 - Dated version numbers, included in the top of the CSS code, let readers quickly determine if they have the most updated version.

June 30th, 2008 - I must've over-written my Nov 30th noCap fix (at some point) with an older, uncorrected version, as this reader pointed out that the "noCap" option STILL wasn't working.

November 30th, 2007 - In response to a comment, I modified the CSS to (correctly) allow for the Caption|noCaption toggle.

March 10th, 2007 - An IE7 bug has been squashed. Additionally, a work-a-round for PZ3 has been found, to provide consistent viewing, even when a page is rendered in quirks-mode.

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 selectors to avoid IE z-index bug and allow absolute positioning for right-floated images.
  • IE conditional comments are needed for pages served in quirks-mode (not included). Get them here.

/* Photo-Caption PZ3 CSS v080630
* copyright: http://randsco.com/copyright
* www.randsco.com
*/

.PZ3-l { float:left; margin-right:10px; }
.PZ3-r { float:right; margin-left:10px; direction:rtl; }
  html>/**/body .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%; }
  html>/**/body .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; }
  html>body .PZ3zoom a:hover { margin:-1px -1px 0 -1px; }

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

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

.noCap a:hover .PZ3cap,
.noCap a:hover .PZ31cap { display:none; }
.noBdr,.noBdr a:hover { 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 height/width in the DIV.
  • The caption width (full-sized image width is used in the HTML, to constrain the size of the caption).
  • In the above example the following toggles are set in the <div> classnames: Bdr/noBdr; Cap/noCap; Lnk/noLnk.
  • Note: In the example, below, the image isn't 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.") Likewise, you could link to the image itself, or a higher resolution version of the image. The choice is yours!

<!-- start PZ3 code -->

<div class="PZ3zoom PZ3-r Bdr Cap Lnk" style="width:210px; height:137px;"><a href="http://randsco.com/blank.html" onclick="return false"><img src="http://randsco.com/_img/blog/0604/pz3-2.jpg" alt="PZ3 demo #2" title="" /><span class="PZ31cap" style="width:479px;"><span class="PZ3inr"><strong>Afternoon Light: </strong>The same Pioneer Basin view, looking toward 3<sup>rd</sup> & 4<sup>th</sup> Recess, later in the day.  <em><span style="color:#ccf; background:inherit;">Photo by Brian Ernst</span></em></span></span></a></div>

<!-- end PZ3 code -->

USAGE

I still haven't 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.

However, I've done some other things with PZ3 that you may be interested in having a closer look at:

   • Using PZ3 for fancy image maps (a way to avoid invalid imagemaps in XHTML v1.1)
   • Using the PZ3 engine for a Photo Gallery

The above techniques are compatible with PZ3 images, meaning that you can use the techniques in conjunction with other PZ3 images (and each other).

Copyright

Photo-caption Zoom is FREE for personal use (linkbacks and donations always appreciated), but commercial usage requires a donation. (Please contact us if you wish to use PZ3 for your commercial project or if you have any questions).

Read more about our copyright policy or make a donation HERE