<img src="https://picsum.photos/id/193/800/800">

img {
  /* the coordinate of the zoom */
  --x: 50%;
  --y: 50%;
  /**/
  transform: scale(var(--zoom));
  transform-origin: var(--x) var(--y);
  clip-path: inset(
    calc((1 - 1/var(--zoom)) * (var(--y)))
    calc((1 - 1/var(--zoom)) * (100% - var(--x)))
    calc((1 - 1/var(--zoom)) * (100% - var(--y)))
    calc((1 - 1/var(--zoom)) * (var(--x)))
  );
  width: 200px;
  cursor: crosshair;
}

img:hover {
  --zoom:2; /* control the zoom level */
}

body {
  background: pink;
  margin: 0;
  height: 100vh;
  display: grid;
  grid-auto-flow: column;
  grid-gap:20px;
  place-content: center;
  overflow: hidden;
}

let img = document.querySelector("img");

img.onmousemove = function(e) {
  e.target.style.setProperty('--x',(100*e.offsetX/e.target.offsetWidth)+'%');
  e.target.style.setProperty('--y',(100*e.offsetY/e.target.offsetHeight)+'%'); 
}