<div class="scene">
  <div class="magic"></div>
</div>
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
}
html,body{height:100%;}
.scene {
  position: absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  top:0;
  right:0;
  left:0;
  bottom:0;
  margin:auto;
  width:300px;
  height: 300px;
  text-align: center;
  overflow:hidden;
  background:#1d1f20;
}
.magic {
  z-index: 5;
  position: absolute;
  margin:auto;
  display:flex;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: url('https://picsum.photos/300/300') no-repeat 0 0;
  background-size:300px 300px;
}
View Compiled
$(document).ready(function () {
  var $magic = $(".magic"),
    $scene = $(".scene"),
    magicWHalf = $magic.width() / 2;
  $scene.on("mousemove", function (e) {
    var x = e.pageX - this.offsetLeft;
    var y = e.pageY - this.offsetTop;
    var hoz = x - magicWHalf;
    var vert = y - magicWHalf;
    $magic.css({ left: hoz, top: vert });
    $magic.css("background-position", -hoz + "px" + " " + -vert + "px");
  });
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js