#zoomimg {
box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
height: 400px;
width: 600px;
overflow: hidden;
}
img {
transform-origin: center center;
object-fit: cover;
height: 100%;
width: 100%;
}
const container = document.getElementById("zoomimg");
const img = document.querySelector("#zoomimg img");
container.addEventListener("mousemove", onZoom);
container.addEventListener("mouseover", onZoom);
container.addEventListener("mouseleave", offZoom);
function onZoom(e) {
const x = e.clientX - e.target.offsetLeft;
const y = e.clientY - e.target.offsetTop;
img.style.transformOrigin = `${x}px ${y}px`;
img.style.transform = "scale(2.5)";
}
function offZoom(e) {
img.style.transformOrigin = `center center`;
img.style.transform = "scale(1)";
}