BlogsDope image BlogsDope

Mouse Rollover Zoom Effect on Images

June 1, 2017 HTML CSS JAVASCRIPT ANIMATION IMAGE 78345

If you have ever visited any online shopping website, then you must have seen the following rollover zoom effect, in which you hover over different parts of a product image to see an enlarged preview of that portion.

Following is a demo of such an effect. Hover over the two images to see their enlarged view.

front image back image

You can create this effect without using any jQuery plugin, with just CSS and JavaScript. Now let's code it.

HTML

<div class="container-fluid">
	<div class="row">
		<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" id="samples">
			<img id="zoom1" src="pic1.jpg" width="100px" height="250px">
			<img id="zoom2" src="pic2.jpg" width="100px" height="250px">
		</div>
		<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
			<div id="preview"></div>
		</div>
	</div>
</div>

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. Both the images are given the same width and height.

CSS

For the CSS code, let's talk about each element separately.

First talking about the preview div, it is given some dimension, border and margin. 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. margin-left: auto and margin-right: auto aligns this div at the center of its parent's width.

CSS

#preview{
	margin-top: 10px;
	border:1px solid black;
	width:350px;
	height:500px;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
}

The images are given display: block to prevent them from getting displayed side by side, and its parent div is given text-align: center to center align the images. On hovering over the images, the mouse cursor is changed to zoom-in.

Also, I gave the value display: inline-block to the images in media query so as to display the two images in the same line when the screen width is less than or equal to 767 px.

The final CSS is given below.

CSS

#preview{
	margin-top: 10px;
	border:1px solid black;
	width:350px;
	height:500px;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
}
#samples{
	text-align: center;
}
#samples img {	
	margin: 10px;
	display: block;
	 border: 2px solid #6A6462;
}
#samples img:hover {
	 cursor: zoom-in;
	 border: 0;
	 -moz-box-shadow:2px 2px 7px 2px rgba(130,130,130,1),-1px -1px 7px 2px rgba(130,130,130,1);
	-webkit-box-shadow: 2px 2px 7px 2px rgba(130,130,130,.7),-1px -1px 7px 2px rgba(130,130,130,1);
	box-shadow: 2px 2px 7px 2px rgba(130,130,130,.7),-2px -2px 7px 2px rgba(130,130,130,1);
}
@media screen and (max-width: 767px){
	#samples img {
		display: inline-block;
	}
}

JavaScript

This part has the key code which is responsible for the preview. Let's divide it into steps.

Step 1

Firstly, I defined two functions 'zoomIn' and 'zoomOut' to define the operations to zoom in and zoom out the object (in this case images) respectively. These functions are defined in Javascript. 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.

HTML

<div class="container-fluid">
	<div class="row">
		<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" id="samples">
			<img id="zoom1" width="100px" height="250px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="pic1.jpg">
			<img id="zoom2" width="100px" height="250px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="pic2.jpg">
		</div>
		<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
			<div id="preview" onmousemove="zoomIn(event)"></div>
		</div>
	</div>
</div>

Step 2

Coming to the JavaScript part, let's start with the zoomOut function. I returned the div with id 'preview' to a variable pre and made its visibility hidden.

Step 3

In the zoomIn function, the visibility of 'pre' is set to visible. So, whenever the mouse is moving on the images, the preview div will be visible. In rest all the cases, it will be hidden.

The condition $('#zoom1').is(':hover') is checking if the mouse is hovering over the first image (having id 'zoom1'). If the condition is found true, then the first image is set as the background image of the preview div. So, whenever you hover over the first image, the preview div will become visible with the first image as its background. Same is applicable for the second image.

But then how is the image getting enlarged in the preview div?

This is because I set the width and height of the image 100px and 250 px respectively, but its actual dimensions are much greater. 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. The width and height of the preview div is less than that of its background image, so the background image does not cover the entire div completely and it gives the feel as if the image is magnified.

JS

 function zoomIn(event) {
  var pre = document.getElementById("preview");
  pre.style.visibility = "visible";
  if ($('#zoom1').is(':hover')) {
        var img = document.getElementById("zoom1");
		pre.style.backgroundImage = "url('pic1.jpg')";
    }
  if ($('#zoom2').is(':hover')){
		var img = document.getElementById("zoom2");
		pre.style.backgroundImage = "url('pic2.jpg')";
  } 

}

function zoomOut() {
  var pre = document.getElementById("preview");
  pre.style.visibility = "hidden";
}

Step 4

The statement var posX = event.offsetX assigns the value of the X coordinate of the mouse pointer's position relative to the image on which the mouse is moving to the var posX. Similarly, posY stores the value of the Y coordinate.

The position of the background image of the preview div is given by the statement pre.style.backgroundPosition=(-posX*2.5)+"px "+(-posY*5.5)+"px";. Here, I took negative of posX and posY so that the preview image background moves in the direction opposite to the mouse movement. Also, some numbers is multiplied to posX and posY so that we can see the entire preview image on mouse movement. This will become more clear when you will yourself try changing the numbers according the dimensions of your images and preview div.

Summing up, the entire code for the animation is given below.

HTML

<div class="container-fluid">
	<div class="row">
		<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" id="samples">
			<img id="zoom1" width="100px" height="250px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="pic1.jpg">
			<img id="zoom2" width="100px" height="250px" onmousemove="zoomIn(event)" onmouseout="zoomOut()" src="pic2.jpg">
		</div>
		<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
			<div id="preview" onmousemove="zoomIn(event)"></div>
		</div>
	</div>
</div>

CSS

#preview{
	margin-top: 10px;
	border:1px solid black;
	width:350px;
	height:500px;
	background-repeat: no-repeat;
	margin-left: auto;
	margin-right: auto;
}
#samples{
	text-align: center;
}
#samples img {	
	margin: 10px;
	display: block;
	 border: 2px solid #6A6462;
}
#samples img:hover {
	 cursor: zoom-in;
	 border: 0;
	 -moz-box-shadow:2px 2px 7px 2px rgba(130,130,130,1),-1px -1px 7px 2px rgba(130,130,130,1);
	-webkit-box-shadow: 2px 2px 7px 2px rgba(130,130,130,.7),-1px -1px 7px 2px rgba(130,130,130,1);
	box-shadow: 2px 2px 7px 2px rgba(130,130,130,.7),-2px -2px 7px 2px rgba(130,130,130,1);
}
@media screen and (max-width: 767px){
	#samples img {
		display: inline-block;
	}
}

JS

 function zoomIn(event) {
  var pre = document.getElementById("preview");
  pre.style.visibility = "visible";
  if ($('#zoom1').is(':hover')) {
        var img = document.getElementById("zoom1");
		pre.style.backgroundImage = "url('pic1.jpg')";
    }
  if ($('#zoom2').is(':hover')){
		var img = document.getElementById("zoom2");
		pre.style.backgroundImage = "url('pic2.jpg')";
  } 
  var posX = event.offsetX;
  var posY = event.offsetY;
  pre.style.backgroundPosition=(-posX*2.5)+"px "+(-posY*5.5)+"px";

}

function zoomOut() {
  var pre = document.getElementById("preview");
  pre.style.visibility = "hidden";
}

 


Liked the post?
Inquisitive and passionate Front-end Developer and Web Designer and Co-Founder of CodesDope.
Editor's Picks
5 COMMENTS

Please login to view or add comment(s).