Image Zoom on Mouse Hover – Zoom Effect

Category: Javascript , Zoom | February 2, 2022
Views Total:5,988 views
Official Page:Go to website
Last Update:February 2, 2022


Image Zoom on Mouse Hover – Zoom Effect


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"/>

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 -;
    const y = e.clientY -; = `${x}px ${y}px`; = "scale(2.5)";
function offZoom(e) { = `center center`; = "scale(1)";

You Might Be Interested In:

Leave a Reply