Image Zoom on Mouse Hover – Zoom Effect

Preview:

Description:

Zoom Effect is a small script that allows you to zoom into an image upon hovering the mouse over it, which is a very effective way to showcase your photos and artwork.

How to use it:

1. Wrap your image into the zoom container.

<div id="container">
  <img src="1.jpg" alt="Image Alt"/>
</div>

2. Center the image in the container.

#container {
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
  height: 500px;
  width: 500px;
  overflow: hidden;
}
img {
  transform-origin: center center;
  object-fit: cover;
  height: 100%;
  width: 100%;
}

3. Zoom the image when hovering over it.

const container = document.getElementById("container");
const img = document.querySelector("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)";
}