JavaScript Product Image Zooming Effect

This tutorial blog to learn how to create image zooming effect with vanilla JavaScript for product details page.

Video tutorial of Product Image Zooming Effect using Vanilla JavaScript

This tutorial video to learn how to create image zooming effect with vanilla JavaScript for product details page.

Video tutorial of Product Image Zooming Effect using Vanilla JavaScript [Source Codes]

This source code can help you to create Video tutorial of Product Image Zooming Effect using Vanilla JavaScript.

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>

<figure id="magnifying_area">
	<img id="magnifying_img" src="images/pic1.png">
</figure>


<script src="js/custom.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #fff;
	min-height: 100vh;
	background:#020819;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: space-around;
}

figure{
	width: 800px;
	height: 500px;
	overflow:hidden;
	border:3px solid #fff;
	position: relative;
}
figure img{
	max-width: 100%;
	min-width: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 10;
	pointer-events: none;
}

JavaScript Code

Copy

var magnifying_area =  document.getElementById("magnifying_area");
var magnifying_img =  document.getElementById("magnifying_img");

magnifying_area.addEventListener("mousemove",function(event){
	clientX = event.clientX - magnifying_area.offsetLeft
	clientY = event.clientY - magnifying_area.offsetTop
	 
	var mWidth = magnifying_area.offsetWidth
	var mHeight = magnifying_area.offsetHeight
	clientX = clientX / mWidth * 100
	clientY = clientY / mHeight * 100

	//magnifying_img.style.transform = 'translate(-50%,-50%) scale(2)'
	magnifying_img.style.transform = 'translate(-'+clientX+'%, -'+clientY+'%) scale(2)'
})

magnifying_area.addEventListener("mouseleave",function(){
	magnifying_img.style.transform = 'translate(-50%,-50%) scale(1)'
})

JavaScript Product Image Zooming Effect

Video tutorial of Product Image Zooming Effect using Vanilla JavaScript

Video tutorial of Product Image Zooming Effect using Vanilla JavaScript [Source Codes]

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery