Kimler Sidebar Menu
Kimler Adventure Pages: Journal Entries
PZ2 - How2
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 ...




















Really great job !
Thx a lot (I like the style, too!)
Cat
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.
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!
* 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.
Thanks!!