CSS Photo-Caption Zoom

Kimler Caption no.2 (Production Code)

January 30, 2005


Pure CSS Photo-Caption Zoom

Demonstration of the technique

This is the final version. Though the width attributes are specified in the CSS, one can use class names, almost like variable definitions, choosing options in the HTML code. You choose widths (100px-600px, every 50px) for both the thumbnail AND larger image. You also choose float (left/right). The HTML code is below.

It was frustrating, trying to find a way to get exact pixel-widths into the HTML code. The problem? I couldn't find a way to specify the hover pseudo-class elements for the anchor <a> tag. I found a "Syntax Rules" document at the World Wide Web Consortium (W3C) that gave me hope: Syntax of CSS rules in HTML's 'style' attribute. It showed the exact syntax for this situation. It didn't work. The only thing that I can figure: because the document was a 'Working Draft 15-May-2002', this part of the specification was never implemented. @$%!@%^%^%! So ... calling all coders. If you know how to do this - PLEASE email me your solution!

It was this CSS shortcoming that led me to Java. Though the Java version was initially considered 'better', a last-minute caption-width problem (and solution) led to some visual pertubations in the FireFox browser. At this point, this pure-CSS option is rock-solid and is the preferred solution. It has been tested in IE6(sp2) and FFox(v1) & I use it on my site. Feedback on other browsers & versions will be appreciated.

Kimler Caption no.2 - Production Code

Final CSS

CSS Notes:

  • More succint CSS selectors are used.
  • By combining selectors, the CSS footprint is not large. Thumbnail widths & image widths need be specified only once.
  • MSIE is picky about the ".Zoom a:hover" properties. It will not pop (zoom,enlarge), without 'certain' ones. (I suspect some type of interplay between this selector and the page a:hover default, but I haven't seen a pattern). If it doesn't pop using just 'padding:0px', try some one or more of these: "margin:0px", "border:0px" and/or "padding:0px;" (So far, one of these, or a combo has worked.) Feel free to contact me if your having problems, or can add to this discussion.
  • Feb05 Update: I changed the CSS to provide the -SAME RANGE- of sizes for thumbnails (rather than a Vert/Horiz option). Also fixed minor margin shift (4px) between thumbnail & large image, which wasn't apparent until an image with the same thumbnail & large-image width was tested.

/* beg Photo-Caption Zoom - Pure-CSS */

.Zright { float:right; margin:5px 0px 2px 10px; }
.Zleft { float: left; margin:5px 10px 2px 0px; }

.Zoom img { border: 1px solid #369; }
.Zoom.t100 img { width:100px; }
.Zoom.t150 img { width:150px; }
.Zoom.t200 img { width:200px; }
.Zoom.t250 img { width:250px; }
.Zoom.t300 img { width:300px; }
.Zoom.t350 img { width:350px; }
.Zoom.t400 img { width:400px; }
.Zoom.t450 img { width:450px; }
.Zoom.t500 img { width:500px; }
.Zoom.t550 img { width:550px; }
.Zoom.t600 img { width:600px; }

.Zoom .caption { display:none; }

.Zoom a { padding:0px; }
.Zoom a:hover { padding:0px; } /* IE picky here */
.Zoom a:visited { padding:0px; }

.w100 a:hover img,.w100 a:hover .caption {width:100px}
.w150 a:hover img,.w150 a:hover .caption {width:150px}
.w200 a:hover img,.w200 a:hover .caption {width:200px}
.w250 a:hover img,.w250 a:hover .caption {width:250px}
.w300 a:hover img,.w300 a:hover .caption {width:300px}
.w350 a:hover img,.w350 a:hover .caption {width:350px}
.w400 a:hover img,.w400 a:hover .caption {width:400px}
.w450 a:hover img,.w450 a:hover .caption {width:450px}
.w500 a:hover img,.w500 a:hover .caption {width:500px}
.w550 a:hover img,.w550 a:hover .caption {width:550px}
.w600 a:hover img,.w600 a:hover .caption {width:600px}
.Zoom a:hover img { margin-bottom:5px;}

.Zoom a:hover .caption {
display:block;
background:#eef;
border:1px solid #339;
font-family:verdana,sans-serif;
text-decoration:none;
text-align:justify;
font-size:10pt;
color:#339; }

.Zoom a:hover .inner {
display:block;
padding:5px 8px; } /* no IEboxModelHack */

/* end Photo-Caption Zoom - Pure-CSS */

Final HTML

Where:

  • (Zright/Zleft) is a choice - e.g. (class="Zoom Zright w### t###")
  • w### = image width (from 100px to 600px, every 50px) - e.g. (w400)
  • Edit (Feb05) Changed HTML to provide for RANGE of thumbnail widths (rather than just a choice between 'Vert/100px' and 'Horiz/150px')
  • t### = thumbnail width (from 100px to 600px, every 50px) - e.g. (t100)
  • Note: You can either HAVE a 'fly-over' text or "turn it off" by specifying  title=""
  • Note: Though the image is the link, you can use ANYTHING you want here (e.g. - JavaScript void(0), href="#" or even another link altogether).

<!-- start photo-caption zoom code -->

<div class="Zoom (Zright/Zleft) w### t###">

<a href="cssZoom06.jpg"> <img src="cssZoom06.jpg" alt="MIT's toy 'Topobo'" title="" />

<span class="caption">

<span class="inner"><strong>

<!-- ================ -->

Topobo: </strong>Designed at the MIT Media Lab, this complex toy turns adults into kids.

<!-- ================ -->

</span>

</span>

</a>

</div>

<!-- end photo-caption zoom code -->

I hope that you find this useful. Feedback is appreciated. - Scott