JSFiddle - React, Tailwind, and code Playground

HTML

<div class="background">
    <div class="hover"><div>
</div>

CSS

.background{
    position: relative;
    width: 1200px;
    height: 600px;
    background: url(http://en.wahooart.com/Art.nsf/O/8XX79N/$File/James-E.-Buttersworth-Clipper-in-a-Heavy-Sea.JPG);
    overflow: hidden;
}

.background::after{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.8);
    content: "";
}

.hover{
    position: absolute;
    z-index: 100;
    width: 150px;
    height: 150px;
    background: url(http://en.wahooart.com/Art.nsf/O/8XX79N/$File/James-E.-Buttersworth-Clipper-in-a-Heavy-Sea.JPG) no-repeat;
    -webkit-mask-image: url(http://7mb.ru/demo/mask/mask.png);
    mask-image: url(http://7mb.ru/demo/mask/mask.png);
}

.background:hover .hover{
    display: block;
}

JavaScript

$(document).ready(function(){
  
    $('.background').mousemove(function(e){
        
        var x = e.pageX;
        var y = e.pageY;
               
        $('.hover').css({
            'top': y - 75,
            'left': x - 75,
            'background-position-y': -y + 75,
            'background-position-x': -x + 75,
        })
    });
    
})