<div class="container">
</div>

body {
  display: flex;
  justify-content: center;
}

.container {
  width: 350px;
  height: 400px;
  background-image: url("https://i.imgur.com/4oO1Qke.png");
  background-repeat: no-repeat;
  background-position: 0px, 0px;
  border: 2px solid #000;
}

var container = document.querySelector(".container");

container.addEventListener("mousemove", function (e) {
  container.style.backgroundPositionX = -e.offsetX * 1.32 + "px";
  container.style.backgroundPositionY = -e.offsetY * 0.455 + "px";
});

//reset the background positions back to the original on mouseleave

container.addEventListener("mouseleave", function () {
  container.style.backgroundPosition = "0px 0px";
});