<!--
Forked pen for forum question answer only:

https://www.sitepoint.com/community/t/reveal-image-on-hover/365388/2

Not really my code.

-->
<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;
  background: url('https://picsum.photos/300/300') 50% 50% ;
  background-size:cover;
  text-align: center;
  overflow:hidden;
}
.magic {
  z-index: 5;
  position: absolute;
  margin:auto;
  display:flex;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  box-shadow:0 0 0 900px #1d1f20;
  /* 900px in the box shadow is a magic number to be larger than we need*/
  background:#1d1f20;
  transition:background .5s ease .2s;
}
.scene:hover .magic{background:transparent;}

$(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 });
  });
});