As it is mentioned in the title, you don’t need an external plugin to create a simple jQuery image zoom effect on hover. We can write it on our own using jQuery’s .animate() and .hover() functions.

jQuery Image Zoom Effect

For this tutorial, we are going to have an image inside a div, which acts as a mask for the image when it gets zoomed. You can use multiple images as well. Let’s create the multiple image version itself.

Can We Use jQuery Image Zoom Plugins Instead ?

Of course, you can, but you may not be able to modify it according to your needs especially if you are a beginner level programmer. Besides, it is quite easy to write this by yourself.

HTML

<!DOCTYPE html>
<html>
<head>
 <title>jQuery Image Zoom Effect on Hover - void Tricks</title>
 <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
<body>
 <div class="pageWrap">
 <div class="imageHolder">
 <img src="path/to/the/image.jpg" class="zImage">
 </div>
 <div class="imageHolder">
 <img src="path/to/the/image.jpg" class="zImage">
 </div>
 </div>
</body>
</html>

We have two images with the class “zImage” inside of two divs with the class “imageHolder“. Also don’t forget to include jQuery library.

jQuery


$(document).ready(function () {
 //Default Values
 var oWidth = 200;
 var oHeight = 200;
 var zoomSize = 50;
 
	 $(".zImage").hover(function(){
		 var zWidth = oWidth + zoomSize; //zoomed width
		 var zHeight = oHeight*(zWidth)/oWidth; //zoomed height
		 var zMarginTop = -(zHeight - oHeight) / 2;
		 var zMarginLeft = -(zoomSize/2);
		 
		 $(this).animate({width: zWidth, height: zHeight, "margin-left": zMarginLeft, "margin-top": zMarginTop}, 100);
	 },function(){
		 $(this).clearQueue(); //Clears All Pending Functions
		 $(this).animate({width: oWidth, height: oHeight, "margin-left": 0, "margin-top": 0 }, 100);
	 });

 
});

We are initializing three variables with a default width, height and size of width to be increased when the image is zoomed. So the width is the key here we are going to zoom the images by width only so the height has to be increased accordingly.

We are using .hover() function which has two functions, one for mouseover another one for mouseleave.

For mouseover, we are just adding the zoomSize value to the original width of the image and then we are finding the height of zoomed image. If your images are square you can just add the zoomSize value to the original height but if your images are rectangular then go with the one in the code.

Then we have two variables that have the half value of added values of width and height respectively. This will make the images zoom from the center kind of effect.

For mouseleave, we are using .clearQueue() function to clearout all the pending functions. If we don’t use this the images will be messed up if you hover on and off the images very fast. This function will clear out the zooming effect as soon as the mouse leaves that image so it will be okay to get zoomed again.

Then we are just making all the parameters return to default using .animate().

Checkout Input box zoom effect on focus using jQuery adn CSS3.

CSS

Finally spice it up with some css.


.pageWrap{
	width: 240px;
	margin: 50px auto;
	padding: 10px;
	border:1px solid #ddd;
}
.imageHolder{
	width: 200px;
	height:200px;
	overflow: hidden;
	margin: 10px;
	border:10px solid #000;
	cursor: pointer;
}
.zImage{
max-width: none;
}

I hope it is useful and you can easily modify this jQuery image zoom effect code to make it more interesting.


Anand Roshan

Author: Anand Roshan

An entrepreneur, programmer and a passionate artist who loves to work independently. Get social: Twitter | Google + | Artist Page

Leave a Reply

Your email address will not be published. Required fields are marked *