JSFiddle - React, Tailwind, and code Playground

by eelyafi

HTML

<!--
Lo-res image: http://www.google.com/logos/2011/worldsfair11-hp.jpg 
Hi-res image: http://www.google.com/logos/2011/worldsfair11-hr.jpg 
Loupe: http://www.google.com/logos/2011/worldsfair11-hp.png 
-->

<div class="cont">
    <img class="lowRes" src="http://www.google.com/logos/2011/worldsfair11-hr.jpg" width="421" height="168">
    <div class="loupeCont">
        <div class="loupe"></div>   
        <div class="highRes"></div>
    </div>   
</div>

CSS

.lowRes {
    border: 1px solid green;
}

.cont {
    position: relative;
    margin: -8px 0 0 -8px;
    
}

.loupeCont {
    position: absolute;
    height: 199px;
    width: 200px;
    top: 20px;
    left: 50px;
    pointer-events: none;
    margin: -100px 0 0 -100px;
    
}

.highRes {
    background-image: url('http://www.google.com/logos/2011/worldsfair11-hr.jpg');
    height: 150px;
    width: 150px;
    border: 1px solid red;
    background-size: 1263px 503px;
    background-repeat: no-repeat;
    background-position: 0;
    border-radius: 100px;
    position: absolute;
    margin: auto;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.loupe {
    background-image: url('http://www.google.com/logos/2011/worldsfair11-hp.png ');
    height: 199px;
    width: 200px;
    position: absolute;
    z-index: 2;
    adisplay: none;
}

JavaScript

var loupeCont = document.getElementsByClassName("loupeCont")[0];
var highResImage = document.getElementsByClassName("highRes")[0];
var lowResImage = document.getElementsByClassName("lowRes")[0];
//console.log(lowResImage, highResImage, loupeCont);


var mouseOver = function (e) {
    var backgroundClientX = (e.clientX-8)*3-100;
    var backgroundClientY = (e.clientY-8)*3-100;
    
    // console.log(e.clientX - 8, e.clientY-8, (e.clientX-8)*3, (e.clientY-8)*3, 'e.clientX , e.clientY')
    
    if (backgroundClientX > 1263 - 100) {
        backgroundClientX = 1263 - 100;
    }
    
		if (backgroundClientY > 503 - 100) {
        backgroundClientY = 503 - 100;
    }
    
    var clientX = '-' + (backgroundClientX) + 'px';
    var clientY = '-' + (backgroundClientY) + 'px';
        
    var styleProp = clientX + ' ' + clientY;
    console.log(e.clientX - 8, e.clientY-8, backgroundClientX, backgroundClientY, 'e.clientX - 8, e.clientY-8, backgroundClientX, backgroundClientY'); 
    
    highResImage.style.backgroundPosition = styleProp;
    
    loupeCont.style.top = e.clientY + 'px';
    loupeCont.style.left = e.clientX + 'px';
        
};

lowResImage.addEventListener('mousemove', mouseOver, false);
//lowResImage.addEventListener('mouseleave', mouseOver, false);