JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="bg-image"></div>    
    <div class="highlight-region"></div>
</div>

CSS

.container {
    position:relative;
    height:1000px;
    width:1000px;
}

.container div {
    position:absolute;
    background-image:url(http://th04.deviantart.net/fs70/PRE/i/2014/265/b/1/wakfu_mmorpg_available_on_steam___by_xa_xa_xa-d805bi9.png);
}

.container .bg-image {
    opacity:0.3;
    -moz-filter: grayscale(100%);
         -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
         -webkit-filter: grayscale(100%);
         filter: gray;
         filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    height:100%;
    width:100%;
}

.container div.highlight-region {
    height:150px; 
    width:150px;
    border-radius: 50%;
    opacity:0;
}

.container div.highlight-region:hover {
    opacity:1;
}

JavaScript

$(".container").on('mousemove', function(e){
    console.log($(".highlight-region").css("left"));
    $('.highlight-region').css({
       left:  e.pageX -120,
       top:   e.pageY -80,
     backgroundPosition: (-e.pageX +120)+'px '+(-e.pageY +80)+'px'
    });
});