CSS Image Zoom In-Window

This In-Window Zoom example demonstrates a CSS method of instantly showing the full size image adjacent to the thumbnail when the user moves the mouse pointer over the thumbnail. It avoids any issues with pop-up blockers, and there's no delay while the browser generates a new window and loads the full size image. The large image is shown immediately when the pointer hovers over the thumbnail.

As with most CSS effects that involve both visibility and z-index, the key is the proper nesting of the relevant elements. I use the same CSS method that many designers use to create drop-down menus. We simply change the 'display' property of the div that contains the full-size image using the ':hover' property of the div that holds the thumbnail. The HTML couldn't be simpler:

div class="rdInWindow"
div class="rdInWindowThumb"img src="images/thumbnail.jpg" alt="" /
div class="rdInWindowZoom"img src="images/bigimage.jpg" alt="" //div
/div!-- end .rdInwindowThumb --
/div!-- end .rdInWindow --

And the required CSS code is straightforward as well:

.rdInWindow { position:relative; top:0; left:0; width:200px; z-index:1; overflow:visible; }
.rdInWindowThumb { position:relative; top:0; left:0; width:200px; z-index:1; }
.rdInWindowThumb img { width:100%; }
.rdInWindowThumb:hover > .rdInWindowZoom { display:block; }
.rdInWindowZoom { position:absolute; top:0; left:202px; width:500px; display:none; z-index:2; }
.rdInWindowZoom img { width:100%; }

As written, even though I used CSS class names to allow for multiple instances on a single page, this code has one limitation: it assumes that the sizes of the thumbnail and full-size images is fixed. The code doesn't automatically adjust for different image sizes. You can add 'id' attributes to the various elements to control these properties individually, or you could add some JavaScript or server-side software to control them dynamically.

This page was last modified on January 10, 2015



Copyright © 2005-2017 by Richard L. Trethewey - Rainbo Design Minneapolis. It's not that I think this is such an earth-shatteringly great presentation, but if you want to copy it, I'd appreciate it if you would ask for permission. I've been working with computers for over 30 years now, and one phrase keeps popping into my head - "I hate it when it's right!" And laptops and smartphones are no better.

Looking for more website design information? See my Sitemap!


  Share This Page!  
Still Have Questions? 
Talk To Me! Click Here!