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 August 27, 2020
