<div class="scene">
  <div class="magic"></div>
</div>
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
}
html,body{height:100%;}
.scene {
  position: absolute;
  top:0;
  right:0;
  left:0;
  bottom:0;
  margin:auto;
  width:300px;
  height: 300px;
  background: #1d1f20;
  text-align: center;
  overflow:hidden;
}
.magic {
  z-index: 5;
  position: absolute;
  width: 100px;
  height: 100px;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/hover-reveal.jpg') 50% 50% no-repeat fixed;
  background-size: 300px 300px;
  border-radius: 50%;
}
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;
    $magic.css({ left: x - magicWHalf, top: y - magicWHalf });
  });
});
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