JSFiddle - React, Tailwind, and code Playground

by asdf

HTML

<!-- 
http://www.google.com/logos/2011/worldsfair11-hp.jpg
http://www.google.com/logos/2011/worldsfair11-hr.jpg
http://www.google.com/logos/2011/worldsfair11-hp.png 
-->
<div class="container">
  <img class="img" src="http://www.google.com/logos/2011/worldsfair11-hp.jpg"/>
  <div class="zoomed">
    <div class="img-zoomed"></div>
    <img class="zoom" src="http://www.google.com/logos/2011/worldsfair11-hp.png"/>
  </div>
</div>

CSS

html, body {
  height: 100%;
  min-height: 100%;
}
.container {
  min-height: 100%;
  position: relative;
}
.zoomed {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.img-zoomed {
  background-image: url("http://www.google.com/logos/2011/worldsfair11-hr.jpg");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
}
.zoom {
  position: absolute;
}

JavaScript

var offsetTop = $('.img').offset().top;
$('body').mousemove(function(e) {
	$('.zoomed').css({top: e.pageY - 100, left: e.pageX - 100});
	if (e.pageY < offsetTop + 300) {
  	$('.img-zoomed').css({'background-position': (-e.pageX * 2 - 100) + 'px ' + (-e.pageY * 2 + 85) + 'px'});
  } 
});