JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="product">
        <div id="glass">
        </div>
        <div id="productHover">
        </div>
    </div>
</div>

CSS

#wrapper { width: 100%; height: 100%;}

#product { 
    width: 600px; 
    height: 600px; 
    background-image: url(http://www.gaponez.com/published/publicdata/AVISTURGAPONEZ/attachments/SC/products_pictures/Adidas_Soccer_Ball_adiPure_Glider_Football_E41994_1_enl.jpg);
    background-size: 300px 300px;
    background-repeat: no-repeat; 
    background-position: center center;
    margin: -300px 0 0 -300px;
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid grey;
}

#glass {
    width: 250px;
    height: 250px;
    border: 3px solid grey;
    -webkit-border-radius: 125px;
    -moz-border-radius: 125px;
    -ms-border-radius: 125px;
    border-radius: 125px;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    overflow: hidden;
    background-image: url(http://www.gaponez.com/published/publicdata/AVISTURGAPONEZ/attachments/SC/products_pictures/Adidas_Soccer_Ball_adiPure_Glider_Football_E41994_1_enl.jpg);
    background-size: 750px 750px;
    background-repeat: no-repeat; 
    background-position: 0px 0px;
    position: absolute;
    top: 0px; 
    left: 0px;
}

#productHover {
    width: 100%;
    height: 100%;
    position: absolute;
}

JavaScript

var hoverArea = document.getElementById('productHover');
var glassElement = document.getElementById('glass');
var glassX = 0;
var glassY = 0;
var GLASS_RADIUS = 125;
var HOVERAREA_WIDTH = 600;
var HOVERAREA_HEIGHT = 600;
var zoomX;
var zoomY;

function moveGlass(e) {
    if (e.offsetX >= GLASS_RADIUS && e.offsetX <= (HOVERAREA_WIDTH - GLASS_RADIUS)) {
        glassX = e.offsetX - GLASS_RADIUS;
console.log("X "+e.offsetX+" - "+GLASS_RADIUS+" = "+glassX );            
    }
    
    if (e.offsetY >= GLASS_RADIUS && e.offsetY <= (HOVERAREA_HEIGHT - GLASS_RADIUS)) {
        glassY = e.offsetY - GLASS_RADIUS;      
console.log("Y "+e.offsetY+" - "+GLASS_RADIUS+" = "+glassY );       
    }

    // move glass
    glassElement.style.webkitTransform = 'translate3d(' + glassX + 'px,' + glassY + 'px,0)';
    glassElement.style.MozTransform = 'translate3d(' + glassX + 'px,' + glassY + 'px,0)';
    glassElement.style.msTransform = 'translate3d(' + glassX + 'px,' + glassY + 'px,0)';
    glassElement.style.transform = 'translate3d(' + glassX + 'px,' + glassY + 'px,0)';
    
    // move zoomed background image inside glass
    glassElement.style.backgroundPosition = -(1.42*glassX) +'px ' + -(1.42*glassY) + 'px';
}

hoverArea.addEventListener('mousemove',moveGlass,false);