<div class="magnifying-glass">
  <img decoding="async"
    src="https://diywebsitespro.com/wp-content/uploads/2022/11/maxresdefault-44.jpg"
    alt=""
    class="magnifying-glass__img"
    draggable="false"
  >
</div>

<div class="magnifying-glass__magnifier">
  <div class="magnifying-glass__enlarged-image">
    <img decoding="async"
      src="https://diywebsitespro.com/wp-content/uploads/2022/11/maxresdefault-44.jpg"
      alt=""
      class="magnifying-glass__img"
      draggable="false"
    >
  </div>
</div>
<script>
    const deviceHasPointer = window.matchMedia('(pointer: fine)').matches;
const container = document.querySelector('.magnifying-glass');
const magnifier = document.querySelector('.magnifying-glass__magnifier');
const enlargedImage = document.querySelector('.magnifying-glass__enlarged-image');
const speed = 0.2;

let containerRect = {};
let mouse = { x: 0, y: 0 };
let glass = { x: 0, y: 0 };
let enlargedImagePos = { x: 0, y: 0 };
let aboveImage = false;
let runMovement = false;
    
function init () {
  if (deviceHasPointer) {
    containerRect = container.getBoundingClientRect();

    window.addEventListener('mousemove', this.getMousePos);
    container.addEventListener('mouseenter', this.showGlass);
    container.addEventListener('mouseleave', this.hideGlass);
    moveGlass();
  }
}

function getMousePos (e) {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
}

function moveGlass () {
  
  glass.x = lerp(glass.x, mouse.x, speed);
  glass.y = lerp(glass.y, mouse.y, speed);
  
  
  enlargedImagePos.x = (glass.x - containerRect.left) / containerRect.width * -100;
  enlargedImagePos.y = (glass.y - containerRect.top) / containerRect.height * -100;
   
 
  magnifier.style.transform = `translate(calc(${glass.x}px - 50%), calc(${glass.y}px  - 50%))`;
  
  enlargedImage.style.transform = `translate(${enlargedImagePos.x}%, ${enlargedImagePos.y}%)`;

  if (runMovement)
    requestAnimationFrame(moveGlass);
}


function showGlass () {
  containerRect = container.getBoundingClientRect();
  aboveImage = true;
  runMovement = true;
  magnifier.style.opacity = '1';
  moveGlass();
}

function hideGlass () {
  aboveImage = false;
  magnifier.style.opacity = '0';
  setTimeout(() => { runMovement = false; }, 250);
}

function lerp (a, b, n) {
  return (1 - n) * a + n * b;
}

init();
    
</script>