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 - 10%

Tonight

Mostly Clear

Mostly Clear

15° C

POP - 10%

Tomorrow

Mostly Sunny

Mostly Sunny

23° C 13° C

POP - 10%

Thu 10-Jul

Partly Cloudy

Partly Cloudy

21° C 13° C

POP - 20%

Fri 11-Jul

Partly Cloudy

Partly Cloudy

22° C 14° C

POP - 20%

Sat 12-Jul

Partly Cloudy

Partly Cloudy

22° C 14° C

POP - 10%

Weather data provided by weather.com®

PZ2 - How2

Filed in:CSS
b2evo

PZ2 - How2

October 14th, 2005  · stk

bleeding hearts PZ2 - Demonstration of "Photo/Caption Zoom Version 2"
Click the Pic to read about different Photo Zoom methods

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

   Next Page -->
(Permalink)
Views: 20568 views
4 Comments · Email Story
Updated: 26-Feb-2006
Web View Count: 20568 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.