JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div>
    <div id="thumbnail"></div>
  </div>
  <img alt="" id="image" src="https://images-na.ssl-images-amazon.com/images/I/71r8jwJFT6L._SY550_.jpg" />
</body>

CSS

#thumbnail {
  display: inline-block;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

#image {
  border: 1px solid black;
}

JavaScript

var image = document.getElementById("image");
image.addEventListener("mousemove", (e) => {
  var x = image.width - e.offsetX;
  var y = image.height - e.offsetY;
  thumbnail.style.backgroundPosition = `${x}px ${y}px`;
});
var thumbnail = document.getElementById("thumbnail");
thumbnail.style.backgroundImage = `url(${image.src})`;