Jquery - Zoom product image on hover

Jquery - Zoom product image on hover

Hello colleagues.

A simple jquery image zoom plugin that adds a zoom effect to any image on your site. Recommended for use on e-commerce sites and blog images.

 

Requirements.

Include jquery library.

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>

Connect the plugin itself.

<script type="text/javascript" src="zoom.js"></script>

 

HTML code.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Product Image Zoom On Hover</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
    <script type="text/javascript" src="zoom.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1>Product Image Zoom On Hover</h1>
<div class="cn f a j">
    <div class="wp f">
        <aside>
            <div class="zoom">
                <div class="original">
                    <img src="image1.png" id="target">
                </div>
                <div class="viewer">
                    <img src="image1.png">
                </div>
                <div class="magnifier"></div>
            </div>
        </aside>
    </div>
</div>
</body>
</html>

 

CSS code.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.f {
    display: flex;
}
.a {
    align-items: center;
}
.j {
    justify-content: center;
}
.cn {
    height: 100vh;
}
.wp {
    --t: 900px;
    width: var(--t);
}
.wp aside {
    width: 50%;
}
.wp aside:last-child {
    padding: 0 0 0 10px;
}
.mgt {
    margin-top: 10px;
}
/* Zoom styles */
.zoom, .original {
    position: relative;
}
.zoom {
    display: inline-block;
}
.original {
    cursor: crosshair;
}
#target {
    width: calc(var(--t) / 2);
}
.zoom .viewer {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.zoom .viewer img {
    position: absolute;
}
.magnifier {
    position: absolute;
    background: #000;
    opacity: 0.7;
    top: 0;
    left: 0;
}
.magnifier, .viewer {
    display: none;
}
.original:hover ~ div {
    display: block;
}
.original::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

 

JavaScript code.

$(document).ready(function(){
    var l = $('#target').zoom(5);
    $('input[type="range"]').on('change', function () {
        l.setZoom(this.value);
    });
});

 

Thank you all, I hope my article was of some help to you.

 

SIMILAR ARTICLES

jQuery carousel with magnifying glass effect
jQuery carousel with magnifying glass effect
WEB
jQuery plugin to enlarge image with magnifying glass
jQuery plugin to enlarge image with magnifying glass
WEB
jQuery - Image gallery with zoom on hover
jQuery - Image gallery with zoom on hover
WEB