JSFiddle - React, Tailwind, and code Playground

by wZVanG

HTML

<div id="loup">
    <img src="http://3.bp.blogspot.com/-Pv3UuU1VtIY/T7RFN54LKmI/AAAAAAAAFW8/AfVYysfr00U/s1600/paisaje-italia.jpg" />
</div>

CSS

#loup {
    position:relative
}
#loup .circle{
    position:absolute;
    height:180px;
    width:180px;
    border-radius:90px;
    background-repeat:no-repeat;
    display:none
}
#loup img{
    position:absolute
}

#loup .layer{
    background:black;
    opacity:0.6;
    width:100%;
    height:100%
}

JavaScript

$(document).ready(function(){
    var obj = $("#loup"), img = obj.find("img")[0], 
        circle = $("<div>",{'class':'circle'})
    
        obj.css({width:img.width,height:img.height})
        obj.mousemove(function(e){
            var left = e.pageX, top = e.pageY, offset = obj.position(), 
                circleSize = [circle.width(),circle.height()],
                topPos = top-offset.top-(circleSize[1]/2), 
                leftPos = left-offset.left-(circleSize[0]/2)
            
            circle.css({
                left:leftPos,
                top:topPos,
                backgroundPosition:"-" + leftPos + "px -"+ topPos + "px"
            })
            
         })
        obj.append($("<div>",{'class':'layer'}))
        obj.append(circle.css({backgroundImage:'url('+img.src+')'}));
        circle.show()
})