Since I did not give any such constraint of dimension on the background image of the preview div, it is taking its full width and height here. This is because I set the width and height of the image 100px and 250 px respectively, but its actual dimensions are much greater. Same is applicable for the second image.īut then how is the image getting enlarged in the preview div? So, whenever you hover over the first image, the preview div will become visible with the first image as its background. If the condition is found true, then the first image is set as the background image of the preview div.

The condition $('#zoom1').is(':hover') is checking if the mouse is hovering over the first image (having id 'zoom1').

In rest all the cases, it will be hidden. So, whenever the mouse is moving on the images, the preview div will be visible. In the zoomIn function, the visibility of 'pre' is set to visible. I returned the div with id 'preview' to a variable pre and made its visibility hidden. Since I want to zoom in the images as the mouse moves over them and zoom out as the mouse leaves the images, I linked the two functions with the onmousemove and onmouseout events respectively.Ĭoming to the JavaScript part, let's start with the zoomOut function. These functions are defined in Javascript. Step 1įirstly, I defined two functions ' zoomIn' and ' zoomOut' to define the operations to zoom in and zoom out the object (in this case images) respectively. This part has the key code which is responsible for the preview. margin-left: auto and margin-right: auto aligns this div at the center of its parent's width. The background-repeat: no-repeat property ensures that the image it will be previewing (which will be made its background image in JavaScript) is not getting repeated. CSSįor the CSS code, let's talk about each element separately.įirst talking about the preview div, it is given some dimension, border and margin. Both the images are given the same width and height. The HTML is plain in which the row is divided into two columns, the first one containing the two images whose preview we want to see and the second one containing the div with id 'preview' which will show the preview.

Roll over image to zoom in