The Output is

The Input is

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {box-sizing: border-box;}
.image {
  position:relative;
}
.magnifier {
  position: absolute;
  border: 3px solid #000;
  border-radius: 50%;
  cursor: none;
  width: 100px;
  height: 100px;
}
</style>
<script>
function magnify(imgID, zoom) {
  var img, glass, w, h, bw;
  img = document.getElementById(imgID);
  glass = document.createElement("DIV");
  glass.setAttribute("class", "magnifier");
  img.parentElement.insertBefore(glass, img);
  glass.style.backgroundImage = "url('" + img.src + "')";
  glass.style.backgroundRepeat = "no-repeat";
  glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";
  bw = 3;
  w = glass.offsetWidth / 2;
  h = glass.offsetHeight / 2;
  glass.addEventListener("mousemove", moveMagnifier);
  img.addEventListener("mousemove", moveMagnifier);
  glass.addEventListener("touchmove", moveMagnifier);
  img.addEventListener("touchmove", moveMagnifier);
  function moveMagnifier(e) {
    var pos, x, y;
    e.preventDefault();
    pos = getCursorPos(e);
    x = pos.x;
    y = pos.y;
    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;}
    glass.style.left = (x - w) + "px";
    glass.style.top = (y - h) + "px";
    glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";
  }
  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;
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }
}
</script>
</head>
<body>

<div class="image">
  <img id="Mypic" src="images/car1.jpg" width="600" height="400">
</div>
<script>
magnify("Mypic", 3);
</script>
</body>
</html>

Download the HTML source code

Kumar Lakshmanan

Make Image Magnifier Glass using HTML CSS JS

The Output is

The Input is

Top Stories

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Best PDF books for web designing and developing

St.Mary's HSS | My School

Make the Loader Using HTML & CSS

Total Pageviews

Contact Form

Footer Menu Widget

Kumar Lakshmanan

Make Image Magnifier Glass using HTML CSS JS

The Output is

The Input is

Top Stories

You may like these posts

Post a Comment

0 Comments

Labels

Join Our Whatsapp Group

Search This Blog

Popular Posts

Disco Lights Animation using CSS

Best PDF books for web designing and developing

St.Mary's HSS | My School

Make the Loader Using HTML & CSS

Total Pageviews

Contact Form

Footer Menu Widget