Open In App

How to create image magnifier using HTML CSS and JavaScript?

Improve
Improve
Like Article
Like
Save
Share
Report

Whenever you visit any online shopping site you must have seen the zoom effect, in which you move your cursor over the image to see an enlarged view of that portion of the image. If you want to add this feature to your website then we can easily create this.

There are two methods to create an image magnifier:

1. Rollover/Follow Zoom Effect

The Rollover zoom effect is simply zooming into an image and seeing the enlarged portion of it without any transparent glass or something. We can create this effect just with pure CSS and JavaScript.

The HTML contains 2 divs, first one is the main div having the image which we will use for magnification, and the second one is the zoom-preview div in which we will see the enlarged part of the image. For the CSS code, let’s talk about each element separately. First, the zoom-preview div is given size, a border, and a margin to design it. It is critical to set background-repeat: no-repeat so that the background image does not repeat. The display: flex property is applied to the body, causing the contents to be aligned in the center of the page both vertically and horizontally. JavaScript part contains mousemove and mouseout events to zoom in as the mouse goes over the image and out when the mouse leaves it. The values of posX and posY hold the X and Y coordinates of the mouse pointer’s location relative to the image.

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=
            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 =
            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:

2. Magnifying Glass Effect

This effect is like you are seeing an enlarged portion of the image through the transparent glass. To create this we have used jQuery Magnify plugin. Magnify is a lightweight jQuery plugin that allows us to simply add zoom functionality to images. It is a very good feature to show product images on eCommerce websites or if you want people to zoom into an image on your website without generating extra overlays or popup windows that can obscure your text.

Step 1: Load the magnify.css in the header and the jquery.magnify.js at the end of the body tag but after the jQuery library.

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/magnify/2.3.3/css/magnify.min.css” integrity=”sha512-wzhF4/lKJ2Nc8mKHNzoFP4JZsnTcBOUUBT+lWPcs07mz6lK3NpMH1NKCKDMarjaw8gcYnSBNjjllN4kVbKedbw==” crossorigin=”anonymous” referrerpolicy=”no-referrer”/>

<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+AkY2U2Y4JJtlCEHzKWV5ZE87vZR3ipdzNJ4U/sfjIaoHMfw==” crossorigin=”anonymous” referrerpolicy=”no-referrer”></script>

Step 2: Insert the small image into your webpage. The data-magnify-src attribute can be used to include the URL of the larger image.

<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-300×300.jpg” />

Step 3: Call the .magnify() function. Ensure that this occurs after the two essential JavaScript files from Step 1 have been loaded. 

<script>
$(document).ready(function() {
       $(‘.zoom’).magnify();
});
</script>

Example 2: 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=
        integrity=
"sha512-wzhF4/lKJ2Nc8mKHNzoFP4JZsnTcBOUUBT+lWPcs07mz6lK3NpMH1NKCKDMarjaw8gcYnSBNjjllN4kVbKedbw=="
        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=
        class="zoom"
        data-magnify-src=
        integrity=
"sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" 
        crossorigin="anonymous">
    </script>
      
    <script src=
        integrity=
"sha512-YKxHqn7D0M5knQJO2xKHZpCfZ+/Ta7qpEHgADN+AkY2U2Y4JJtlCEHzKWV5ZE87vZR3ipdzNJ4U/sfjIaoHMfw=="
        crossorigin="anonymous" 
        referrerpolicy="no-referrer">
    </script>
      
    <script>
        $(document).ready(function () {
            $(".zoom").magnify();
        });
    </script>
</body>
  
</html>


Output:



Last Updated : 28 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads