CSS Popup Image Viewer: A Review, with Hints and Tips for Using

Do you have a webpage with one or more thumbnails representing larger photographs? And do you want the larger image to appear in the same window when the visitor's mouse hovers over the thumbnail? Here is one solution you can download for free.

CSS Popup Image Viewer is found at DynamicDrive.com. Using only HTML and CSS, the large image displays when the cursor hovers over the thumbnail. It works nicely and the HTML code below validates strict XHTML:


<a class="thumbnail" href="#thumb"><img src="image/pic1-thumb.jpg.jpg" width="60px" height="65px" alt="alt text here" /><span><img src="image/pic1-large.jpg" alt="" /><br />Caption text underneath image</span></a>


This solution uses the CSS method of visibility:hidden. Google specifically warns against using hidden text, but as debated in Google forums, the risk appears small when using it in this manner. It is still worth mentioning, though.

This simple solution works very nicely and the code will validate strict XHTML.

►  Take a look at some of our other posts, such as NEW Credit Card rules You Should Know About! and A Dozen Sample Math Formulas for Excel.