Kimler Adventure Pages (http://randsco.com)

Original Photo-Caption Zoom: A pure-CSS image/caption solution. Easy to use & XHTML-valid. (Sunrise: East Vidette Mtn., Kings Canyon N.P., CA.)

Finally ...

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.

PZ3 Demo: Image overlays text, unlike the original.
Pioneer Basin (John Muir Wilderness, Calif.) Photo by Brian Ernst

Original

Cut'n-paste CSS/XHTML

b2evolution "How to install" instructions

---

Version 2

Introducing PZ²

Cut'n-paste CSS/XHTML

PZ² how² (w/b2evo-specific sections)

---

Version 3

Introducing PZ³ Updated

PZ³ Cut'n-paste code Updated

PZ3-enhanced Image Map Example New

PZ3 Photo Gallery New

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.

They've been tested on a PC, using IE6(sp2) and FireFox(v1). I'm not sure how they'll render in different browsers or browser versions. All but two are pure-CSS solutions (two use JavaScript ) and all are XHTML-valid (verified with the 'validate' button on the footer bar).

- -

Motivation

Easy to Use: Choose "left/right" float, image width & "vert/horiz" thumbnail orientation from within the HTML code. (My daughter, Alex, waiting to go camping.)

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').

My search, didn't yield an 'out-of-the-box' solution. If there is a solution out there, I didn't find it. But, the three photo zoom techniques gave me hope that I might be able to design something on my own. That's what I did. Below are EIGHT different photo zoom techniques. Each one links to a demonstration page, which includes notes on the technique & cut'n-paste code. Three are merely replicas of the previous work (a synopsis and archive). Five are of my own making, two of which, are nearly identical (one uses javascript and the other doesn't) & offer practical solutions to the problem.

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. 3, A Java/CSS Zoom "Kimler Caption no. 3" - (Adding JavaScript to get what I want)

• No. 4, A Pure CSS Zoom "Photo-caption Zoom Version 2" -or- (PZ²) - (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- (PZ³) - (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?

A headache! Trying to bend CSS to your will is like pushing on a balloon: fix one problem, but one pops up somewhere else. "Kimler Caption no.2" (the pure-CSS solution) requires the image width to be specified by the CSS. "Kimler Caption no.3" specifies the width in the HTML, but is not a pure-CSS solution (using JavaScript "onmouse" functions) and has a glitch in FireFox, which is more pronounced when the image is floated right. (See the demonstration page to see if you can spot the problem).

Which method is best?

Added Jul 2006: We're now using PZ³ 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.

• THe JavaScript method cannot employ 'onmouse' functions on objects it can't actually 'see' (the caption display is set to 'none' & isn't visible to the 'mouse').

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.