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:

Table of Content

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>