Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

random top 40

PZ2 - How2

Filed in:CSS

PZ2 - How2

October 14th, 2005  · stk

Getting Photo-Caption Zoom (version 2) Up & Running on Your Site
(Instructions, Examples & Considerations)

In an effort to deflect a myriad of questions from readers who wanting to implement the pure-CSS photo/caption zoom (version 2) on their site - demonstrated with the photo here - I'm making this "How-to" guide. It contains the information needed to install and use it.

This photo/caption zoom technique is written to CSS 2.0 and XHTML 1.1 standards (which you can verify, using the validation buttons at the bottom of this page, if you so desire). It's been tested on both IE and FireFox. (Note: When IE7 comes out - which will support the :hover pseudo-class for all elements - the code will likely be re-written more succinctly).

PZ2 is the second version of "photo/caption zoom". This newer version overlays the text (eliminating 'text and element migration'), it allows larger images to be displayed on a page (because the image can overlay menu items and other DIVS) and it has some built-in display toggles (you can turn the caption on/off, for example). All that good stuff, unfortunately, comes at a price. The code is longer, more complex and therefore, trickier to use. (Hence the need for this tutorial.)

If you're new to the "photo/caption zoom" method displayed here, it's recommended that you read "CSS Photo-Caption Zoom" to start. It provides a history behind its development, as well as a demonstration of various 'photo zoom' techniques.

If you just want to get PZ2 working on your page (special instructions for b2evolution users), by all means, READ ON ...

Views: 60842 views
13 Comments · GuestBook
default pin-it button
Updated: 26-Feb-2006
Web View Count: 60842 viewsLast Web Update: 26-Feb-2006

Your Two Sense:

XHTML tags allowed. URLs & such will be converted to links.

Subscribe to Comments

Auto convert line breaks to <br />

1.flag DontheCat Comment
Brilliant :-)
2.flag crom Comment
Well dome howto, i like your style. Even me i can understand all.
Really great job !
3.flag Catlynn Comment
I searched like hours for this zoom-thing and finally I had the right keywords and ended up on your site... So great. No I kinda fear the work buildin it in, but can't be as hard as finding it at all.

Thx a lot (I like the style, too!)

4.flag stk Comment
Catlynn ... LOL ... and to think we try to make it EASY for people to find us! :(

I bet "photo caption zoom" works! (Or any others you see in the Top 40 Search Term List). ;)

Anyway ... glad you found us! Let me know if you have any questions.
5.flag Katie Comment
I want to thank you endlessly! This is exactly what I was hoping to be able to do on my website, and I found your site the first try! I never expected to find such a well done tutorial so quickly!

I think I searched for "tutorial hover image" or similar.

I am having some difficulties tweaking the images in the tables of my website, I'm hoping to still find some more in depth step by step information on changing borders and re-sizing the images. My tables also jumped and changed size on me when I added this code.

I look forward to searching every written word on this site to help find the answers!
6.flag Katie Comment
OK, A little update! I have been able to fix most things that were ailing me! Two things I could not find!!

* Is there a way to make the zoom float above (higher than) the image? or must they always be below?

* Is there a way to have the zoomed image appear over the other floating images? if I have several in a row, the zoomed image appears larger, but underneath the other floating images.

7.flag Anu Comment
Thank you a lot. I was exactly looking for this kind of stuff :)
8.flag stk Comment
Anu - No problem. Glad you like!
9.flag Steve Comment
This is absolutely wonderful. Thanks for creating it!

Is there any way to have the images zoom to a percentage of their actual size instead of zooming out to full size?
10.flag stk Comment
Steve - Thanks. Not sure why you'd need to have pics zoom to a %age of size though?

The visitor has to download the full image size, whether a %age is shown or the full image.

It's a lot more efficient to have the visitor download only that which is shown. (e.g., if full size is 100KB and 650px by 450px and you show only 325px by 225px ... the visitor still has to download the 100KB file AND suffer visual loss of a hardware image reduction).

Better to resize the image to 325px by 225px and have the visitor download that (Better image, smaller file).

To answer your question though, I suppose it would be possible to do that. While it's configured to zoom to "natural size", I would imagine you could restrict the zoom to XX px by YY px (mind you, you'd have to calculate and specify this for every image).
11.flag Steve Comment
I have users uploading images to a folder and the images within the folder are then displayed as thumbs that zoom out. However, these images can be as large as 2800x2100 and they zoom off the page. I can't ask the users to resize the images themselves - I'm pretty sure if they were that savvy they wouldn't upload these monstrous sizes to begin with! - and resizing them myself is impractical.

I guess I'll have to find a solution that uses some javascript or something. Anyway, thanks for getting back to me - I greatly appreciate it!
12.flag Manda Comment
Thank you for sharing this! I think I'm so close, but I'm having some problems:

Is there a way to make the zoomed image float above (higher than) the image? or must they always be below & to the left? I'm trying to create a small portfolio gallery and the images to the left are being cut off the page. It'd be nice if the left images would float right.

Any suggestions?
13.flag stk Comment
Manda - You're welcome.

There are several options, but first, some explanations.

One of the restrictions with using one image tag for both the thumb and the zoomed image is that the zoomed image must overlie the thumb (horrid flickering results if you don't do this, as the browser can't decide which image to show).

Having the zoomed image zoom out from either the upper left (and down) or upper right (and down) requires no additional CSS instructions.

OKAY ... so ... now, your options:

1) Use two image tags, one for the thumb and one for the zoomed image, and place the zoomed image anywhere you want.

2) Have the zoomed image fly out from the lower left, lower right or center (and up). (Unless all your images are the same aspect ratio and sizes, this will require "per-image" CSS directives).

3) Add padding to the bottom of the page, so images near the bottom have "room" to expand into (this is what we do here, on