Mouseover Zoom Effect using JavaScript

Some websites allow you to zoom in on images by hovering over them. This feature is called the Zoom Image on Mouseover effect. This method allows you to enlarge images by simply moving the cursor over the image. This snippet plays a very effective role in providing a smooth and interactive experience to the users. Today we will create a zoom image on the mouseover snippet using HTML, CSS, and vanilla JavaScript. Below is a video tutorial that shows the complete process of creating the snippet. Before collecting the code, watch the video in full.

Video Tutorial:

We hope you have watched the tutorial. When this feature is added to a website, visitors don’t have to click or open a new tab to see the product image in detail. The zoom effect happens instantly and improves the user experience. Since this widget allows you to see the products up close, there is a high chance of increasing the conversion rate. It keeps users on your site for a longer period of time, which in turn reduces the bounce rate. Online stores like Amazon, eBay, Shopify use this type of feature on their websites. They use the zoom effect to help customers inspect clothing, electronics, and accessories products before making a purchasing decision. Also, sites like photography and portfolio websites, real estate platforms, news and magazine sites, etc. present the fine details of their work to the users through this feature.

For our project, we used two similar images. One large and one small. The HTML part contains the main image and an empty div (#wrapper) inside the container which is used for the zoomed-in view. In the CSS part, the zoomed part is designed as a circle. It is hidden using 'opacity:0'. The circle image zoom effect is visible when the mouse hovers. Vanilla JavaScript is used to detect the mouse position and move the zoomed part accordingly.

You May Also Like:

Mouseover Zoom Effect using JavaScript [ Source Code ]:

To create this snippet, we need to create an HTML and CSS file. You can create a separate JavaScript file for the JavaScript code we used here. Copy the code from the code box below and paste it into your files. You can also download the code from the download button at the bottom of this blog post.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->     
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>How to Create Zoom Image on Mouseover using JavaScript</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div id="wrapper">
        <img src="1.jpg" id="v-1" alt=""/>
        <div id="v-2"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
    const c = document.getElementById('wrapper');
    const o = document.getElementById('v-1'); 
    const m = document.getElementById('v-2');

    c.addEventListener('mousemove', function(e) {
        const { left, top, width, height } = this.getBoundingClientRect();
        const x = e.clientX - left;
        const y = e.clientY - top;
        const offsetX = x / width;
        const offsetY = y / height;

        m.style.backgroundPositionX = (offsetX * 100 - 9) + '%';
        m.style.backgroundPositionY = (offsetY * 100 - 9) + '%';
        m.style.left = (x - 180) + 'px';
        m.style.top = (y - 180) + 'px';
    });
});

    </script>
</body>
</html>

ADD CSS:

body {
    background: #0573b6; 
}
#wrapper {
    max-width: 500px;
    height: auto;
    position: relative;
    margin: 8% auto 0;
}

#v-1 {
	width: 100%;
	height: auto;
	box-shadow: 0 2px 20px rgba(0,0,0.5);
}

#wrapper:hover, 
#wrapper:active {
    cursor: zoom-in;
    border-radius: 50%;
}

#wrapper:hover #v-2, 
#wrapper:active #v-2 {
    opacity: 1;
}

#v-2 {
    position: absolute;
    display: block;
    border-radius: 50%;
    width: 400px;
    height: 400px;
    background: url('2.jpg') no-repeat #0573b6;
    pointer-events: none;    
    opacity: 0;
    z-index: 150;
    transition: opacity .2s;
    border: 25px solid #fff;
}

This zoom image on mouseover is a simple yet powerful feature for any website. It improves user experience, improves engagement, and helps to increase business sales. We have used vanilla JavaScript which ensures fast load time and better SEO performance for any website. We hope you have collected the source code. To know more, click on the "Load More" button on our homepage. Thanks for visiting our website.

DOWNLOAD CODE

Video Tutorial:

Mouseover Zoom Effect using JavaScript [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Mouseover Zoom Effect using JavaScript

Video Tutorial:

Mouseover Zoom Effect using JavaScript [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form