javascript - How to highlight part of an image and blur the rest? -

i'm looking way similar effect above using css + javascript. ideally i'm looking javascript given object

{   top: 30,   left: 10,   width: 100   height: 300 } 

would produce effect on image #document on mouse enter , leave events can highlight part of image when mouse on it.

so far have following:

var highlight = function(sel, info) {    $(sel).mouseenter(function() {      var w = $(sel).width();      var h = $(sel).height();      $(sel + ' .box').css({        top: info.top + 'px',        left: info.left + 'px',        width: info.width + 'px',        height: info.height + 'px',        opacity: 1      });      $(sel + ' .overlay-a').css({        top: 0 + 'px',        left: 0 + 'px',        right: 0 + 'px',        bottom: (h - info.top) + 'px',      });      $(sel + ' .overlay-b').css({        top: info.top + 'px',        left: 0 + 'px',        right: (w - info.left) + 'px',        bottom: 0 + 'px'      });      $(sel + ' .overlay-c').css({        top: info.top + 'px',        left: (info.left + info.width) + 'px',        right: 0 + 'px',        bottom: 0 + 'px'      });      $(sel + ' .overlay-d').css({        top: (info.top + info.height) + 'px',        left: info.left + 'px',        right: (w - info.left - info.width) + 'px',        bottom: 0 + 'px'      });    }).mouseleave(function() {      $(sel + ' .box').css({        top: 0 + 'px',        left: 0 + 'px',        width: 0 + 'px',        height: 0 + 'px',        opacity: 0      });      $(sel + ' .overlay-a, ' + sel + ' .overlay-b, ' + sel + ' .overlay-c, ' + sel + ' .overlay-d').css({        top: 'auto',        left: 'auto',        right: 'auto',        bottom: 'auto',      });    });  }    highlight('#document', {    top: 10,    left: 10,    width: 200,    height: 200  });

.container {    position: relative;    width: 600px;  }  .box {    position: absolute;    border: 2px solid black;    box-sizing: border-box;    z-index: 2;  }  .container img {    width: 100%;    z-index: 1;  }  .overlay {    position: absolute;    opacity: 0.5;    background-color: black;    z-index: 2;    top: 0px;    left: 0px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="document" class="container">    <img src="http://lorempixel.com/600/400" />    <div class="overlay overlay-a"></div>    <div class="overlay overlay-b"></div>    <div class="overlay overlay-c"></div>    <div class="overlay overlay-d"></div>    <div class="box"></div>  </div>

i made jsfiddle demonstrate how blur effect can achieved. ideally want have where, when hover on image, rest of page uses blur effect. rest of page can separated using

so, using code, want like:

<div class=blur> code of other stuff </div> <img href="example.jpg"> <div class=blur> more code... </div> 

to make photo stick out, give photo high z-index have position:fixed div has z-index lower selected item.

here's more code found demonstrates how blur effect, bit more complex mine though.

if have more questions, feel free ask.