Kimler Sidebar Menu
Kimler Adventure Pages: Journal Entries
CSS Photo-Caption Zoom
On the left is a demonstration of the original version of photo-caption zoom. It's a pure-CSS, XHTML-valid, image/caption zoom method. Move the cursor over the image and it will 'zoom' (pop, explode, magnify) to reveal a larger image with a caption. There are a number of image rollover techniques, but this is the first that combines an image with a caption. It looks nice and saves page real estate, sitting as a small thumbnail, until the reader decides otherwise. Most important, the method is practical and easy to implement.
Pioneer Basin (John Muir Wilderness, Calif.) Photo by Brian Ernst
PZ3 Update: 10-Mar-2007 - Fixes for an IE7 bug (multiple right-floated images) & a work-a-round for IE6 and IE7 in quirks-mode.
Added July 2006: PZ3 is here! It's more robust, lighter and REPLACES PZ2. Compared to PZ2, PZ3 is easier to use, needs 72% less code, overcomes a pesky IE z-index problem and can use an infinite range of image sizes (image size is specified in the XHTML, not the CSS). Like PZ2, Photo-Caption Zoom version 3 overlays text. (See demo on the right).
Added Oct 2005: I've developed a more robust "version 2" (named "PZ2"). It adds functionality (and complexity) to the original, PLUS has the added capability to OVERLAY text (no more "element migration" on ZOOM). It is demonstrated here on the right.
A single image is used for both the small and large views. (No need to have a large and a small version). The width is the only size parameter needed (the surrounding <div> expands to the appropriate height). To float the image left or right and to use different images sizes, just use the appropriate class names from within the HTML (no need to modify an external CSS file).
This code is a result of my recent inspiration and chronic frustration regarding the presentation of images and photo captions on web pages. Below, you'll find 8 different image zoom techniques, all of which are demonstrated on their own page & include cut'n-paste CSS/HTML code. Take your pick.
We've all seen this: "Click to see a larger version." (A new window takes over our screen and we wonder why the larger version is nearly the same size.) HTML makes it tough to present both thumbnail & full-scale versions of image data. If that's bad, it's even worse when it comes to the accompanying textual metadata - the caption.
Early on (or, in computer terms, the "Dark Ages") I used Microsoft Front Page to make my pages. Led by the nose, I merrily made large and small images, wondering just how tables could be effectively and efficiently used to render captions. I found a way, but it wasn't at all efficient. I ditched it because it was too cumbersome.
Why aren't caption tags associated with images and not tables? Who made that decision? Why can't one just add a caption attribute to the <img> tag, like 'alt' or 'title'? (I've used both as a captioning tool. It works, but only barely. There's no formatting and the bubble text disappears if you don't keep moving the cursor over the image).
A better way?
Because we just recently moved our pages from a free-host to a pay-host and began using "b2evolution" journaling software, we thought, "why not revisit the whole image-caption issue?" A Google search led me to "Simple Bits", where Dan Cederholm demonstrates a Photo Zoom example.
It zoomed a photo, without a caption, but it was pure-CSS. I downloaded the code & upon closer examination, quickly realized that this method was not practical, but it did provide inspiration & opened up several other avenues to examine.
More searching led me to two other sites: Paul Griffin presentes an elegantly simple and much more practical, technique; and Stu Nicholls at the "CSS Playground" demonstrates a unique CSS method to magnify an image and overlay it onto page text. Both methods showed promise of practicality, though neither dealt with a caption.
A picture may be worth a thousand words, but I've found that many pictures are mute when it comes to important things like "who", "when", "where" (and sometimes, surprisingly, even "WHAT"). An accompanying caption can add vital data to the visual image (metadata). But oddly, the lowly caption is often overlooked and not seen on web pages. Online photos are a lot like an 'inside joke'. Without the accompanying caption, you just don't 'get it' (to understand, 'you had to be there').
Photo-Only Zoom Methods
No. 1, A Pure-CSS Zoom - (Dan Cederholm's 'Proof-of-Concept')
No. 2, A Pure-CSS Zoom - (Paul Griffin's simple & elegant solution)
No. 3, A Pure-CSS Zoom - (Stu Nicholls' inventive method with text overlay)
No. 4, A Java/CSS Zoom - (My first time popping images - why use CSS?)
Photo and Caption Zoom Methods
No. 1, A Pure CSS Zoom "Kimler Caption no. 1" - (Adding a caption to Stu Nicholls' design)
No. 2, A Pure CSS Zoom "Kimler Caption no.2" - (Adding a caption to Paul Griffin's version) "Original" Photo Zoom
No. 4, A Pure CSS Zoom "Photo-caption Zoom Version 2" -or- (PZ2) - (Added functionality, Photo-overlay-on-Zoom technique) (Added Oct 2005 - PZ2 "the better Zoom")
No. 5, A Pure CSS Zoom "Photo-caption Zoom Version 3" -or- (PZ3) - (72% Less Code than PZ2, overcomes an IE z-index problem. Photo-overlay-on-Zoom technique) (Added Jul 2006 - PZ3 "the EZ-PZ ZOOM") (Updated 10-Mar-2007)
What do I want?
The answer, of course, is a moving target. Just a few weeks ago, I was happy to find a non-tables, <div>-solution that was XHTML-valid (no zoom). I began my quest because I thought that 400px images were taking up too much page real estate. When I found Dan's image zoom, I became hopeful that I could find a rollover image zoom that was utilized a caption. I didn't. So I made one that incorporated features I deemed important.
Here's a list of important design criteria:
Practical: First and foremost, the method must be easy to use. Adding an image and caption should be done in one spot, with little image editing required & markup accomplished in one file, in one location.
One Image File: I don't want to be bothered to make a large AND small image file and I don't want two images in one file. It takes too much time to do that for every image. I want a thumbnail AND a larger image to come from one file.
Specify either height or width, but not both: If I had a dollar for every time I displayed "properties" or opened an image editing program to see what the height and width of an image is, I'd have enough money saved to send Alex to University (maybe a Private one)! I want to specify one and let the <div> or <img> tags figure out the other dimension. It's a computer - COMPUTE!
Specify the width/height in the HTML: I want to be able to change image sizes on the fly, as I write. I don't want to have to traverse over to another directory, find the correct CSS file, and add ANOTHER width/height set of numbers to the growing list of available image sizes.
XHTML-valid code: I want well-formed pages.
pure-CSS: I don't want a java applet that requires some version of java that readers don't have. We've already got a slide-show viewer that (it seems) half the World can't load. Geez. I take the time to make this stuff, I want people to see it. They don't care about browsers or browser versions (and frankly, I don't want to either, but don't get me STARTED on that topic!)
No tables: I'm off tables. Finished. Finito.
Nice-looking caption that's attached to the photo: I want something that is pleasing to the eye and is easy to modify. (This blogging tool has some nifty code-insertion buttons on the editing page, which I can customize to whatever set of HTML code I want. Ultimately, that's what I've done - program in my final HTML code. Hit one button and several lines of code are added - BINGO. Just need to pick right/left, image file name (most of it's filled out) and type your caption. Simple.
What did I get?
Which method is best?
We're now using PZ3 for our pages, so we consider that "best". It is much easier to use than PZ2 and it fixes a z-index problem with Internet Explorer v6sp2. There's still nothing "wrong" with the "Original" Photo-caption Zoom.
Actually, these blog pages incorporate all three! There is no conflicting code. Run one, two or all three. Each work independently of one another.
The choice is yours.
My answer was different this morning, than it is this evening. While I was writing this blog, I discovered with longer captions, both methods were failing. Fixing the pure-CSS version (no.2) was easy, but fixing the Java/CSS solution (no.3) was its undoing. Trying to marry the 'onmouse' functions with 'a:hover' CSS has been a challenge. Though a fix was obtained (and it works in both MSIE6 and FireFox), there is a visual 'glitch' in FireFox when you exit the image through its base (it's more pronounced when the image is floated to the right).
In the end "Kimler Caption no.2", the pure-CSS version, is best. Initially, I thought the CSS code would be bloated, but by combining selectors, the CSS footprint is reasonable. Once can use multiple class names in the HTML like passing variables to a script. Take a look at the final 'production' code for this version and you'll see what I mean. One can select a RANGE of images widths from within the HTML file (i.e. - 200px to 600px, every 50px), eliminating the need to modify the CSS file. Resizing the image to a multiple of 50px isn't a bother. I normally edit photos anyway (to crop them and reduce their JPG quality to make smaller files). It's a pure-CSS solution that doesn't have ANY visual problems (in MSIE6(sp2) and FireFox(v1) anyway). Feedback on other browsers & versions will be appreciated.
Have a look at each and decide for yourself.
The sticking point.
At the end of the day, the problem comes down to this:
The pure-CSS method does not allow for the specification of the a:hover pseudo classes for the anchor <a> tag within the HTML code (inline). 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, but it didn't work. That part of the specification was never implemented.
However, the pure-CSS version is visually-pleasing, XHTML-valid and easy to use - "Kimler Caption #2". I hope that you find it useful and feedback is appreciated.