I'm looking for a way to get a similar effect to the above but using css + javascript. Ideally I'm looking for a javascript that given an object

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


would produce the effect on the image #document on a mouse enter and leave events so I can highlight part of the image when the mouse is over it.

So far I have the 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;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="document" class="container"&gt;
  &lt;img src="http://lorempixel.com/600/400" /&gt;
  &lt;div class="overlay overlay-a"&gt;&lt;/div&gt;
  &lt;div class="overlay overlay-b"&gt;&lt;/div&gt;
  &lt;div class="overlay overlay-c"&gt;&lt;/div&gt;
  &lt;div class="overlay overlay-d"&gt;&lt;/div&gt;
  &lt;div class="box"&gt;&lt;/div&gt;
&lt;/div&gt;





Question: tombstones and beer mugs
Answer: How about a smiley face? :) There are some both in the wasysym and the marvosym package. I guess everyone is happy, when he arrives at the end of a demonstration. ;)