CSS Photo-Caption Zoom

Kimler Caption no.2

January 30, 2005


Pure CSS Photo-Caption Zoom

Demonstration of the technique

I wanted to modify Paul's original code three ways: (1) specify image size based on 'width' (or 'height'), but not both; (2) define size attributes in the HTML <body> (inline); (3) add a caption.

Here is the result. It achieves all goals except - the width attribute MUST still be specified in the CSS (however, by using a combination of CSS class names & selectors, one can select a range of widths in the HTML).

I spent many hours, scouring the Internet, trying to find a way to get the width specs 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 JavaScripting. Though the JavaScript 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 looks nice and is my preferred solution. It has been tested in IE6(sp2) and FFox(v1). Feedback on other browsers & versions will be appreciated.

Notes on the method

The final solution, incorporates a 'range' of common image widths (starting with 100px and going to 600px, 50px at a time) for both the large image AND the thumbnail. One can then select the image and thumbnail within the HTML. I normally edit photos anyway (to crop and to reduce the JPG quality for smaller file sizes) so resizing isn't onerous.

EDIT (Feb2005): Changed code to provide -SAME RANGE- of sizes for thumbnails (rather than just Vert/Horiz option). Also fixed minor margin shift (4px) between thumbnail & large image.

Get CSS/HTML Code Here

Kimler Caption no.2 Code

CSS

CSS Notes:

  • More succint CSS selectors can be used, but I've included the <div> and <span> & fully qualified each selector so that it is easier to determine the formatting applied to each element.
  • MSIE6 needs 'something' in the zoom <div> on hover. Don't ask me why, it just won't 'pop' the image without it.
  • The "inner" <span> was added so that its padding would not 'push out' on the caption <span>, which avoids what I believe is the "IE box model" problem.
  • If you look at the code on THIS page, there are three extra lines of formatting to override the a:hover highlight boxes on this page.

/* Photo Zoom CSS */

div.zoom { float:right;
margin:0px 0px 5px 10px; }

div.zoom img { width:100px;
border:1px solid #369; }

div.zoom span.caption {
display:none; }

div.zoom a:hover { padding:0px; }
/* IE needs this in the above selector */

div.zoom a:hover img { width:250px;
margin-bottom:5px; }

div.zoom a:hover span.caption { width:250px;
display:block;
background: #eef;
border:1px solid #369;
font-family:verdana,sans-serif;
text-decoration:none;
text-align:justify;
font-size:8pt;
color:#339; }

div.zoom a:hover span.inner { display:block;
padding:2px 5px; }
/* above used to avoid the IE box model hack */

/* End Photo Zoom CSS */

HTML

HTML Notes:

  • As it stands now, the <a href> link is the image itself. One could use anything here, or (if you're not opposed to JavaScript) use "void(0)" or "#" here and kill the link).

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

<div class="zoom">

<a href="cssZoom06.jpg"> <img src="cssZoom06.jpg" alt="MIT's toy 'Topobo'" title=" Construct & program your own bot. " />

<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 -->