<article id="flesh">
  <img src="https://static.tildacdn.com/tild3230-3866-4961-a537-373835353664/_1.png" id="bone">
</article>

html, body, #flesh {
  background-color: black;
  position: relative;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  background: url('https://static.tildacdn.com/tild6662-3138-4136-b563-343636343530/_.png') no-repeat center;
  background-size: cover;
}

#flesh {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#bone {
  background-color: black;
  width: 99%;
  height: 100%;
  object-fit: cover;
  mask-image: url('https://static.tildacdn.com/tild6662-3138-4136-b563-343636343530/_.png');
  -webkit-mask-image: url('https://static.tildacdn.com/tild6662-3138-4136-b563-343636343530/_.png');
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: 170px 1000px;
  -webkit-mask-size: 170px 1000px;
}

* {
  box-sizing: border-box;
}

$(document).ready(function() {
    var currentMousePos = { x: -1, y: -1 };
    $('#flesh').mousemove(function(e) {
        currentMousePos.x = e.pageX;
      
        $('#bone').css('-webkit-mask-position-x', currentMousePos.x - 75);
        $('#bone').css('mask-position-x', currentMousePos.x - 75);
    });
});