CSS Photo Zoom - Example 1

Dan Cederholm (Original Design)

Aug 22, 2003

Link to Dan's Photo Zoom Page


SimpleBits

Pure CSS Photo Zoom

Demonstration of the technique

View related weblog post
(view source for CSS and XHTML)

Based on pixy's Fast rollovers, no preload needed concept

Here is Dan's original proof-of-concept photo zoom. I've modified his page slightly, mostly for presentational purposes, but his original code for the photo zoom is the same.

When I became tired of large pictures taking up so much room & Googled topics that might shed a light on alternative methods, I came across Dan's page. The idea looked GREAT & I thank Dan for his contribution. The date he posted his idea was August, 2003. What was I doing then? Painting a house & anticipating the birth of our first baby (a girl). I knew nothing of CSS, XHTML & here was this guy, leagues ahead (of me anyway) ... innovating to find new ways to present visual data on the web.

Though his wonderful contribution inspired me to look further (and I really have to thank all those who posted comments to his web site, because it is from Dan's original contribution AND those comments, that led me to the solutions here today).

Upon closer inspection, I realized that Dan's method was truly a 'proof-of-concept'. It has a couple of major shortcomings that kept me from exploring the method further. The primary one was that the thumbnail (with the little magnifying glass) and the larger photo, were combined into one image file - see it here). Then, there is the additional overhead associated with using images of differing sizes (the technique Dan uses, shifting the background image on hover, requires one to calculate a pixels-distance for images of differing sizes. Do I really want to do this for hundreds of varyious sized photos? No. Don't get me wrong - as a one-off, a 'proof-of-concept' - this is totally cool. It's just (as Dan anticipated) there are better ways of accomplishing the same thing.

But I thought I'd include Dan's method & code, because it really DID inspire me and he deserves credit for his innovating. -Thanks Dan!

Notes on the method

Dan's Original Code

CSS

/* Photo Zoom CSS */

#zoom a { float: right;
margin: 0 0 10px 10px; border: 1px solid #000;
text-indent: -1000em; /* hide the link text */
overflow: hidden; display: block;
width: 125px; /* show only thumbnail */
height: 94px;
background: url(zoom.jpg) no-repeat top left; }

#zoom a:hover { width: 300px; /* adjust size to zoomed photo */
height: 225px;
background-position: 0 -104px; }
/* move the image so only the big one shows */

/* End Photo Zoom CSS */

HTML

<!-- Photo Zoom HTML Code -->

<div id="zoom">

<a href="zoom.jpg">View photo</a>

</div>

<!-- end Zoom code -->