How to Create Image Magnifier using HTML CSS and JavaScript?
Last Updated :
15 Oct, 2024
An image magnifier is a feature that allows users to zoom into specific parts of an image, simulating a magnifying glass effect. It’s created using HTML for structure, CSS for styling, and JavaScript to control the zoom functionality dynamically on hover or click.
There are two methods to create an image magnifier:
Rollover/Follow Zoom Effect
The rollover zoom effect uses CSS and JavaScript to enlarge an image on hover, displaying a zoom preview in a fixed-size div. Mouse position controls the zoom area, and flexbox centers the layout for a smooth experience.
Example: This example will illustrate the complete running code of Image Magnifier Using HTML5
HTML
<!DOCTYPE html>
<html>
<head>
<title>Image Magnifier</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.main {
display: flex;
}
.main img {
cursor: zoom-in;
}
.zoom-preview {
height: 300px;
width: 300px;
border: 1px solid #000;
margin-left: 20px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Image Magnifier</h1>
<p>Move your mouse over the image</p>
<div class="main">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220316223348/gfg.jpg"
id="gfg-img"
height="300px"
width="300px" />
<div class="zoom-preview"></div>
</div>
<script>
let img = document.getElementById("gfg-img");
let preview = document.querySelector(".zoom-preview");
// Calculate the ratio by which we want to
// magnify the image. You can increase or
// decrease it according to your requirement
let x = preview.offsetWidth / 100;
let y = preview.offsetHeight / 100;
img.addEventListener("mousemove", (e) => {
preview.style.backgroundImage =
"url(https://media.geeksforgeeks.org/wp-content/uploads/20220316223348/gfg-300x300.jpg)";
preview.style.backgroundSize = img.width * x +
"px " + img.height * y + "px";
let posX = e.offsetX;
let posY = e.offsetY;
preview.style.backgroundPosition = "-"
+ posX * x + "px -" + posY * y + "px";
});
img.addEventListener("mouseout", () => {
preview.style.backgroundImage = "none";
});
</script>
</body>
</html>
Output:
Magnifying Glass Effect
The Magnify jQuery plugin creates a zoom effect, resembling a transparent glass magnifying an image's portion. It's ideal for eCommerce sites, offering a simple, lightweight way to zoom into images without obscuring content with overlays or popups.
Example : This example will illustrate the complete running code of Image Magnifier using HTML5 with jQuery.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Image Magnifier</title>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.3/css/magnify.min.css"
integrity=
"sha512-wzhF4/lKJ2Nc8mKHNzoFP4JZsnTcBOUUBT+lWPcs07mz6l
K3NpMH1NKCKDMarjaw8gcYnSBNjjllN4kVbKedbw=="
crossorigin="anonymous"
referrerpolicy="no-referrer" />
<style>
body {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
</style>
</head>
<body>
<h1>Image Magnifier</h1>
<p>Move your mouse over the image</p>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220322220850/gfg.jpg"
class="zoom"
data-magnify-src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220316232110/gfglarge.jpg" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.3/js/jquery.magnify.min.js"
integrity=
"sha512-YKxHqn7D0M5knQJO2xKHZpCfZ+/Ta7qpEHgADN+AkY2U2
Y4JJtlCEHzKWV5ZE87vZR3ipdzNJ4U/sfjIaoHMfw=="
crossorigin="anonymous"
referrerpolicy="no-referrer">
</script>
<script>
$(document).ready(function () {
$(".zoom").magnify();
});
</script>
</body>
</html>
Output:
Similar Reads
How to Create Responsive Modal Images using CSS & JavaScript? Modal images provide an interactive way to display larger versions of images without navigating away from the current page and it takes user attention and users can stay on our website some more time. PreviewApproachFirst, create a basic HTML layout for your image gallery and modal pop-ups. Each ima
4 min read
How to Create a Custom Image Magnifier using jQuery ? Glimpse of Image magnifier: An image magnifier is the zooming capability of your cursor point. Where you placed your cursor in the define div the image will be popped out in zoom mode. Like in the shopping sites, when you want to purchase any kind of cloth and want to check the material or print on
4 min read
How to create a Hero Image using HTML and CSS ? A Hero Image is a large image with text, often placed at the top of a webpage. Hero images can be designed using HTML and CSS. This article contains two sections. The first section attaches the image and designs the basic structure. The second section designs the images and texts on the images. The
2 min read
How to Create Image Gallery using JavaScript? An Image Gallery is a collection of images displayed in a grid or slideshow format on a webpage. To create an Image Gallery using JavaScript, you can dynamically load images, create HTML elements, and use CSS for styling. JavaScript can add interactivity, like transitions and navigation controls.Pro
3 min read
How to create Image Comparison Slider using CSS ? In this article, we will see how to create an Image Comparison Slider using CSS. The Image Comparison Slider essentially aids in the distinction of two photographs or products. As a result, the user can quickly determine which of the two products or two images in a better way.Approach: The approach
2 min read
Create a Resize and Compress Images in HTML CSS & JavaScript While using the GeeksforGeeks Write Portal to write articles, we need to upload the images. As we need to resize the image as per GeeksforGeeks's requirement, we search for different tools and websites on the internet to resize and compress the image. But, as a web developer, we can create our own i
7 min read