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

The images on your left are a demonstration of the new and improved Pure-CSS PZ² "Pure-CSS Photo/Caption Zoom (Version 2)".

The images expand upon mouseover, displaying a larger image and corresponding caption (just like the original), but this advanced version won't distrupt the flow of the XHTML page.

As I learn more about CSS, I've tried to improve upon the original Pure-CSS Photo/Caption Zoom (or PZ as a certain someone from India likes to call it!)

This is the third attempt now, and "by jove", I believe I've got it! (Of course, I'm referring to the holy grail of Photo Zooms ... the OVERLAY method - where the image doesn't jolt/shift/migrate/move the text and surrounding elements).

The technique employed here is not without it's eccentricities, as it is not nearly as easy to deploy as the original. However, it remains much more user-friendly than it's progenitor - "Magnify Image", which requires the use of two image files. In contrast, PZ2 uses a single image file, saving both bandwidth and headache - and of course - adds the capability of a nicely styled caption.

Compared to the original Photo/Caption Zoom, PZ2 requires the use of an extra <div>, prior to the normal PZ code. Why? Because the only way to keep things from shifing is to use "position:absolute" (which removes the element from the document flow). However ... this doesn't really work for showing the un-zoomed image (as it would overlay the text). So ... to overcome this problem, one can place an empty <div> (sized to the photo) UNDERNEATH the "absolutely" positioned image. Boom. Text can be READ!

Of course, in order to place the empty <div>, one needs to know it's dimensions. Sadly, width is not enough. So ... whereas the original Photo/Caption Zoom utilized ONLY width, PZ2 requires the height (only the thumbnail height and it's entered directly into the HTML).

There is another idiocyncracy of this second version and I blame it COMPLETELY on MSIE (as it isn't an issue with FireFox). The MSIE problem: they (currently) don't differentiate between the z-index of an un-hovered -vs- hovered element. WHAT? The bottom line: To satisfy MSIE, each PZ2 image MUST be uniquely named and be assigned a z-index value greater than the image that follows, or it won't "overlay" that image.

Edit: A work-a-round to overcome this problem has been discovered and applied to the next version - Photo-caption Zoom Version 3 (PZ3).

This isn't a problem within the post, but becomes difficult to manage from post-to-post. Bottom line: don't place PZ2 images near the bottom and for images that expand to tall dimensions ... place them near the top.

One other thing. The overlay (position:absolute) method dictates that ALL images open from the upper left-hand corner. No big deal for images floated left, but for images floated right - be aware.

Edit: Not an issue in the next version - Photo-caption Zoom Version 3 (PZ3).

I hope that this little demonstration has whetted your appetite for more, however, with the workload currently sitting on my desk, it will be some time before I'm able to properly document everything and make it available for public consumption (CSS code, XHTML code and b2evo-specific instructions).

Hang tight ... as I WILL get around to doing this. Check back periodically (or, if you so desire) skids can be greased via PayPal (Just email to get the correct address).

Cheers!