Create image zoom on hover

<figure class="zoom" onmousemove="zoom(event)" style="background-image: url(https://anakmudacoding.com/wp-content/uploads/2022/07/kv-bigdata-pc_2.jpg)">
  <img src="https://anakmudacoding.com/wp-content/uploads/2022/07/kv-bigdata-pc_2.jpg" />
</figure>

figure.zoom {
   background-position: 50% 50%;
   position: relative;
   width: 80%;
   overflow: hidden;
   cursor: crosshair;
}
 figure.zoom img:hover {
   opacity: 0;
}
 figure.zoom img {
   transition: opacity 0.5s;
   display: block;
   width: 100%;
}

function zoom(e) {
  var zoomer = e.currentTarget;
  e.offsetX ? (offsetX = e.offsetX) : (offsetX = e.touches[0].pageX);
  e.offsetY ? (offsetY = e.offsetY) : (offsetX = e.touches[0].pageX);
  x = (offsetX / zoomer.offsetWidth) * 100;
  y = (offsetY / zoomer.offsetHeight) * 100;
  zoomer.style.backgroundPosition = x + "% " + y + "%";
}