Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create an image to zoom with CSS and JavaScript?

CSS Javascript Web Development Front End Technology

Image zoom effects allow users to see enlarged details of an image by hovering over different areas. This is commonly used in e-commerce websites and galleries to provide better product viewing experience.

Syntax

The image zoom effect combines CSS positioning and JavaScript event handling −

.img-zoom-container {
    position: relative;
}

.img-zoom-lens {
    position: absolute;
    border: 1px solid #d4d4d4;
}

.img-zoom-result {
    background-image: url(image.jpg);
    background-size: calculated-size;
    background-position: calculated-position;
}

Example: Complete Image Zoom Implementation

The following example creates an image zoom effect where hovering over the left image shows an enlarged view on the right −

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    * {
        box-sizing: border-box;
    }
    
    .zoom-container {
        display: flex;
        gap: 20px;
        align-items: flex-start;
    }
    
    .img-zoom-container {
        position: relative;
        display: inline-block;
    }
    
    .img-zoom-lens {
        position: absolute;
        border: 2px solid #007bff;
        width: 80px;
        height: 80px;
        background-color: rgba(0, 123, 255, 0.1);
        cursor: crosshair;
    }
    
    .img-zoom-result {
        border: 2px solid #ddd;
        width: 300px;
        height: 300px;
        background-repeat: no-repeat;
    }
    
    .main-image {
        width: 300px;
        height: 300px;
        object-fit: cover;
    }
</style>
</head>
<body>
    <h2>Image Zoom Effect</h2>
    <p>Hover over the left image to see the zoom effect on the right:</p>
    
    <div class="zoom-container">
        <div class="img-zoom-container">
            <img class="main-image" src="https://picsum.photos/400/400?random=1" alt="Sample Image">
        </div>
        <div class="img-zoom-result"></div>
    </div>

    <script>
        function initImageZoom() {
            const imageEle = document.querySelector('.main-image');
            const resultEle = document.querySelector('.img-zoom-result');
            const container = document.querySelector('.img-zoom-container');
            
            let zoomLens = document.createElement("div");
            zoomLens.className = "img-zoom-lens";
            container.appendChild(zoomLens);
            
            const lensWidth = zoomLens.offsetWidth;
            const lensHeight = zoomLens.offsetHeight;
            const resultWidth = resultEle.offsetWidth;
            const resultHeight = resultEle.offsetHeight;
            
            const xRatio = resultWidth / lensWidth;
            const yRatio = resultHeight / lensHeight;
            
            resultEle.style.backgroundImage = `url(${imageEle.src})`;
            resultEle.style.backgroundSize = `${imageEle.width * xRatio}px ${imageEle.height * yRatio}px`;
            
            function moveLens(e) {
                e.preventDefault();
                const pos = getCursorPos(e);
                
                let x = pos.x - (lensWidth / 2);
                let y = pos.y - (lensHeight / 2);
                
                if (x > imageEle.width - lensWidth) x = imageEle.width - lensWidth;
                if (x < 0) x = 0;
                if (y > imageEle.height - lensHeight) y = imageEle.height - lensHeight;
                if (y < 0) y = 0;
                
                zoomLens.style.left = x + "px";
                zoomLens.style.top = y + "px";
                resultEle.style.backgroundPosition = `-${x * xRatio}px -${y * yRatio}px`;
            }
            
            function getCursorPos(e) {
                const rect = imageEle.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                return {x: x, y: y};
            }
            
            imageEle.addEventListener("mousemove", moveLens);
            zoomLens.addEventListener("mousemove", moveLens);
        }
        
        // Initialize zoom effect when page loads
        window.addEventListener('load', initImageZoom);
    </script>
</body>
</html>

Two side-by-side containers appear. The left shows the original image with a translucent blue lens that follows the mouse cursor. The right container displays an enlarged view of the area under the lens, creating a magnifying glass effect.

Key Components

  • Container: Holds the image and lens with relative positioning
  • Lens: Small overlay that follows mouse movement
  • Result area: Displays the zoomed portion using background-image
  • JavaScript: Calculates positions and updates the zoom view

Conclusion

Image zoom effects enhance user experience by providing detailed views of images. The technique combines CSS positioning with JavaScript event handling to create smooth, interactive zoom functionality perfect for product galleries and detailed image viewing.

Updated on: 2026-03-15T14:29:50+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements