Create an Image Magnifier Glass with HTML, CSS & JavaScript

HTML Code (`index.html`):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Learn how to create an interactive image magnifier glass using HTML, CSS, and JavaScript. This tutorial explains how to zoom in on an image using a magnifier effect for a detailed view.">
    <meta name="keywords" content="image magnifier, image zoom effect, interactive image zoom, HTML CSS JavaScript, magnifier glass tutorial, image magnifier glass, web development, zoom effect, interactive design">
    <meta name="author" content="Your Name">
    <meta property="og:title" content="Create an Image Magnifier Glass with HTML, CSS & JavaScript">
    <meta property="og:description" content="Learn how to create an image magnifier glass with HTML, CSS, and JavaScript. Zoom in on images with a magnifier effect to provide detailed views.">
    <meta property="og:image" content="image.jpg">
    <meta property="og:url" content="yourwebsite.com">
    <meta name="twitter:title" content="Create an Image Magnifier Glass with HTML, CSS & JavaScript">
    <meta name="twitter:description" content="Learn how to create an interactive image magnifier glass using HTML, CSS, and JavaScript. Add zoom effects to your images with ease.">
    <meta name="twitter:image" content="image.jpg">
    <meta name="twitter:card" content="summary_large_image">
    <title>Create an Image Magnifier Glass with HTML, CSS & JavaScript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<h1>Image Magnifier Glass</h1>

<p>Mouse over the image to see the magnifier effect:</p>

<div class="img-magnifier-container">
  <img id="myimage" src="img_girl.jpg" width="600" height="400" alt="Magnified Image">
</div>

<p>Feel free to change the strength of the magnifier glass when initiating the magnify function.</p>

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

CSS Code (`style.css`):

/* Universal styles for all elements */
* {
  box-sizing: border-box;
}

/* Container for the magnifier effect */
.img-magnifier-container {
  position: relative;
  display: inline-block;
}

/* Style for the magnifier glass */
.img-magnifier-glass {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  width: 100px;
  height: 100px;
}

JavaScript Code (`script.js`):

// Function to initialize the magnifier effect
function magnify(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  
  // Create magnifier glass element
  glass = document.createElement("DIV");
  glass.setAttribute("class", "img-magnifier-glass");
  
  // Insert magnifier glass before the image
  img.parentElement.insertBefore(glass, img);
  
  // Set the background properties for the magnifier glass
  glass.style.backgroundImage = "url('" + img.src + "')";
  glass.style.backgroundRepeat = "no-repeat";
  glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
  
  bw = 3; // Border width for the magnifier glass
  w = glass.offsetWidth / 2; // Width of the magnifier
  h = glass.offsetHeight / 2; // Height of the magnifier

  // Add event listeners for mouse and touch movements
  glass.addEventListener("mousemove", moveMagnifier);
  img.addEventListener("mousemove", moveMagnifier);
  glass.addEventListener("touchmove", moveMagnifier);
  img.addEventListener("touchmove", moveMagnifier);
  
  // Function to move the magnifier glass
  function moveMagnifier(e) {
    var pos, x, y;
    e.preventDefault();
    
    // Get cursor position relative to the image
    pos = getCursorPos(e);
    x = pos.x;
    y = pos.y;

    // Prevent the magnifier from going outside the image
    if (x > img.width - (w / zoom)) {x = img.width - (w / zoom);}
    if (x < w / zoom) {x = w / zoom;}
    if (y > img.height - (h / zoom)) {y = img.height - (h / zoom);}
    if (y < h / zoom) {y = h / zoom;}

    // Position the magnifier
    glass.style.left = (x - w) + "px";
    glass.style.top = (y - h) + "px";

    // Set the background position of the magnifier glass
    glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
  }

  // Function to get cursor position relative to the image
  function getCursorPos(e) {
    var a, x = 0, y = 0;
    e = e || window.event;
    a = img.getBoundingClientRect();
    
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    
    // Account for page scrolling
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    
    return {x : x, y : y};
  }
}

// Initialize the magnifier with the id of the image and zoom strength
magnify("myimage", 3);

Explanation of the Code:

HTML Structure:
- The img tag represents the image that will be magnified when hovered over. The div with the class img-magnifier-container wraps the image.
- A script is included to call the magnify() function, which adds the magnifier glass effect to the image.
CSS Styling:
- The img-magnifier-container class is used to set the position of the container holding the image.
- The img-magnifier-glass class applies the style to the magnifier glass (border, size, and shape).
- This glass will be positioned over the image and move as the user moves the mouse or touches the screen.
JavaScript Functionality:
- The magnify() function creates a DIV element that acts as the magnifier glass. It sets the background of the glass to the image and scales the background according to the zoom factor.
- The moveMagnifier() function calculates the cursor position relative to the image and adjusts the position of the magnifier glass accordingly.
- The magnifier glass shows a zoomed-in view of the image, following the cursor.
SEO Optimization:
- The meta title clearly describes what the page offers (“Create an Image Magnifier Glass with HTML, CSS & JavaScript”).
- The meta description is concise, explaining how users can learn to implement this effect.
- Meta tags like “image magnifier,” “interactive image zoom,” and “HTML CSS JavaScript” are optimized to ensure the content ranks for relevant keywords.

By separating the HTML, CSS, and JavaScript, this solution is modular and easy to maintain. The magnifier effect works across both mouse and touch events for a seamless experience on both desktop and mobile devices.

Create an Image Magnifier Glass with HTML, CSS & JavaScript

HTML Code (index.html):

CSS Code (style.css):

JavaScript Code (script.js):

Explanation of the Code:

Leave a Reply Cancel reply

HTML Code (`index.html`):

CSS Code (`style.css`):

JavaScript Code (`script.js`):