Kimler Sidebar Menu

Kimler Adventure Pages: Journal Entries

search cloudRandom Searches
random top 40

Weather Forecast for Yellow Point, B.C.

Today

N/A

N/A

N/A° C

POP - 40%

Tonight

Rain / Snow Showers

Rain / Snow Showers

0° C

POP - 40%

Tomorrow

Showers

Showers

4° C 1° C

POP - 70%

Sun 22-Nov

Showers / Wind

Showers / Wind

4° C 1° C

POP - 70%

Mon 23-Nov

Showers

Showers

4° C 2° C

POP - 60%

Tue 24-Nov

Rain / Snow Showers

Rain / Snow Showers

6° C 4° C

POP - 40%

Weather data provided by weather.com®

PZ2 - How2

Filed in:CSS
b2evo

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

(Permalink)
Views: 29727 views
8 Comments · EmailThis · GuestBook
Updated: 26-Feb-2006
Web View Count: 29727 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
10/30/05
Brilliant :-)
2.flag crom Comment
06/07/06
Well dome howto, i like your style. Even me i can understand all.
Really great job !
3.flag Catlynn Comment
11/12/07
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!)

Cat
4.flag stk Comment
11/12/07
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
10/07/08
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
10/07/08
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.

Thanks!!
7.flag Anu Comment
07/26/09
Thank you a lot. I was exactly looking for this kind of stuff :)
8.flag stk Comment
07/26/09
Anu - No problem. Glad you like!