<div class="image">
  <div class="image__wrap" style='background-image: url("https://res.cloudinary.com/dknfmbngn/image/upload/v1623732196/samples/sheep.jpg")' onmousemove='zoom(event)'>
    <img src="https://res.cloudinary.com/dknfmbngn/image/upload/v1623732196/samples/sheep.jpg" alt="Фото 1">
  </div>
</div>

.image {
  width: 600px;
  overflow: hidden;
  img {
    margin: auto;
    display: block;
    transition: opacity .5s;
    width: 600px;
    &:hover  {
      opacity: 0;
    }
  }
  &__wrap {
    background-position: 50% 50%;
    position: relative;
    width: 100%;
    overflow: hidden;
    cursor: zoom-in;
  }
}

  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 + '%';
  }