JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<div class="black">
<div class="red"></div>
</div>

CSS

.red {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: url("http://bennettfeely.com/clippy/pics/pittsburgh.jpg") no-repeat 0 0;
  position: absolute;
}
.black {
  background: #000;
  width: 500px;
  height: 500px;
  position: relative;
  overflow: hidden;
  cursor: none;
}

JavaScript

var blackOffset = $(".black").offset();
var red = $(".red");
$("body").on("mousemove", ".black", function(e) {
  var redX = e.clientX - blackOffset.left;
  var redY = e.clientY - blackOffset.top;
  red.css({
  	"top": (redY-50) + "px",
    "left": (redX-50) + "px"
  });
  var bgpozX = 50 - redX;
  var bgpozY = 50 - redY;
  red.css("background-position", bgpozX+"px " + bgpozY + "px" );
});