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: 0px -603px;
    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)*3-75;
    var backgroundClientY = (e.clientY)*3-75;
    
    if (backgroundClientX > 1263 - 75) {
        backgroundClientX = 1263 - 75;
    }
    
		if (backgroundClientY > 503 - 75) {
        backgroundClientY = 503 - 75;
    }
    
	  var clientX = (-backgroundClientX) + 'px';
    var clientY = (-backgroundClientY) + 'px';
    
    // console.log(clientX, clientY, backgroundClientX, backgroundClientY, 'clientX, clientY, backgroundClientX, backgroundClientY'); 
    var styleProp = clientX + ' ' + clientY;
    
    highResImage.style.backgroundPosition = styleProp;
    
    loupeCont.style.top = e.clientY + 'px';
    loupeCont.style.left = e.clientX + 'px';
        
};

const throttle = (func, delay) => {
	delay = delay || 30;
  let timeOut;
  
  return (...args) => {
  	if (timeOut) {
    	return;
    }
    timeOut = setTimeout(() => {
    	func.apply(null, args);
      timeOut = null;
    }, delay);
  }

}

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