JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <div class="man">
    <div class="layer one"><img src="https://pp.vk.me/c629508/v629508415/40ce7/CtRaieuocgI.jpg" /></div>
    <div class="layer two"><img src="https://pp.vk.me/c629508/v629508415/40cee/d6A-zb9DkE8.jpg" /></div>
    <div class="layer three"><img src="https://pp.vk.me/c629508/v629508415/40cf5/jJ3BSQjtN0k.jpg" /></div>
    <div class="layer four"><img src="https://pp.vk.me/c629508/v629508415/40cfc/ylHeXQAGELo.jpg" /></div>
    <div class="layer five"><img src="https://pp.vk.me/c629508/v629508415/40d17/IKbiBKXERrQ.jpg" /></div>
    <div class="layer six"><img src="https://pp.vk.me/c629508/v629508415/40d1e/BdsbtwhE25o.jpg" /></div>
    <div class="layer seven"><img src="https://pp.vk.me/c629508/v629508415/40d25/Ygb435oYnIY.jpg" /></div>
    <div class="layer eight"><img src="https://pp.vk.me/c629508/v629508415/40d2c/EGOvaKEA-kY.jpg" /></div>
  </div>
  <div class="the hole"></div>
  <svg width="0" height="0">
  </svg>
</body>

CSS

.man {
  width: 600px;
  height: 500px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: auto;
}

.layer {
  position: absolute;
  transition: .3s;
}

.one {
  z-index: 10;
  opacity: 1;
}

.two {
  z-index: 9;
  opacity: 1;
}

.three {
  z-index: 8;
  opacity: 1;
}

.four {
  z-index: 7;
  opacity: 1;
}

.five {
  z-index: 6;
  opacity: 1;
}

.six {
  z-index: 5;
  opacity: 1;
}

.seven {
  z-index: 6;
  opacity: 1;
}

.eight {
  z-index: 5;
  opacity: 1;
}

.hole {
  position: absolute;
  width: 20%;
  height: 20%;
  z-index: 11;
  opacity: 1;
  border: 2px solid black;
  overflow: hidden;
  background-image: url("images/1.png");
}

body:hover .layer img {
  opacity: .1;
}

JavaScript

$(document).ready(function() {
	  $(window).mousemove(function(pos) {
	    $(".hole").css('left', (pos.pageX + 0) + 'px').css('top', (pos.pageY + 0) + 'px');
	  });
	});