CSS Photo-Caption Zoom
Kimler Caption no.1
Jan 28, 2005
Pure CSS Photo-Caption Zoom
Demonstration of the technique
Here is a demonstration of one possible image + caption magnification method. It is a modification of a method designed by Stu Nicholls.
Just hover your mouse over the thumbnail image to produce a 4x enlarged image. Move your mouse off the thumbnail image to pop-down the enlarged image. The enlarged image is initially displayed at 1px x 1px (so small that you can't see it) then enlarges to it's full size 'instantly' on mouse over.
The modification details are listed below in the notes. It is a pure CSS construct that uses 'absolute' positioning so that the zoomed image & caption do NOT cause the body text to 'flow'. It requires two images, a smaller thumbnail & the larger image, with caption. The modification was also done in a 'liquid' design. Works in IE6(sp2) & FireFox(v1) browsers.
Feedback on other browsers & versions would be appreciated.
Notes on the method
- Valid XHTML
- Requires 2 images (AFAIK one image can't share two separate locations in a browser window or it will alternate & 'flicker')
- It has a nice "over-text" effect (no flowing text when the larger image is viewed). This is a result of the 'absolute' positioning.
- Only the 'width' attribute needs defining, not both 'width' and 'height'.
- There are 2 caption options. (1) adding a caption directly to the photo (yellow) and (2) using the <a> tag "title" attribute. Because (1) requires you to edit the photo, it's also easy to add a copyright. (The photo-caption was easily added in MS Paint.)
- Tested in both FireFox (v1) and MSIE 6.0.29(sp2). Other browsers? I don't know. With FFox & IE6 covered - that's approximately 85% of the browser universe, according to the (Jan05 - W3 Schools Browser Stats)
- The thumbnail image is now imbedded into the body text (moved further down in HTML and added a 'float:left' CSS element). The design is now 'liquid'.
- Bottom Line - The weakest of the three caption methods presented.
- It requires two images (a pain).
- It requires a 'hard-wired' caption made by editing the image file, making the file size bigger.
- the image file takes longer to download
- the caption is difficult to edit.
- Although only a width attribute needs to be defined, it must be done in either the external CSS file or the <head> area of the HTML file.
- A new set of CSS selectors is needed for images of differing widths -OR-
- all images must be made one width -OR-
- a select set of CSS selectors can be used for a range of image widths (i.e. - 250px, 300px, 350px, etc.) and images must be sized accordingly.
Kimler Caption no.1 Code
CSS
/* Photo Zoom CSS */
#zoom { float:left; position:relative; width:75px; margin-right:10px; }
#zoom a img { border:0pt none; }
#zoom a.p1:hover { background-color:transparent; } /* IE6sp2 needed this to open the large image */
#zoom a .large { position: absolute; width:0px; }
#zoom a.p1:hover .large { border:1px solid black; position: absolute; top: -100px; left: 150px; width:300px; }
/* End Photo Zoom CSS */
HTML
<!-- Photo Zoom HTML Code -->
<div id="zoom">
<a class="p1" href="#" title="thumbnail image"> <img src="cssZoom04thumb.jpg" title="Short 'title' caption." alt="Thumbnail image" /> <img class="large" src="cssZoom05.jpg" title="Enlarged view of image" alt="Enlarged view of image" />
</a>
</div>
<!-- end Zoom code -->