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

Question

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; } 

 <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> 

Answer 1

I made a JSfiddle to demonstrate how a blur effect can be achieved. Ideally what you want to do is have it where, when you hover over the image, the rest of the page uses the blur effect. The rest of the page can be separated using a

So, using my code, what you want is something like:

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

To make the photo stick out, give the photo a high z-index then have a position:fixed div that has a z-index lower than the selected item.

Here's some more code that I found that demonstrates how to do this blur effect, a bit more complex than mine though.

If you have any more questions, feel free to ask.

Answer 2

The first thing I thought of would be to use JS/jQuery to change the zindex of the element you wish to highlight to higher up (closer to the user) and have a partially transparent overlay appear .show() in jQuery (IIRC).

So you would have:

[viewer]

• element to be highlighted
• semi-transparent element
• main content

Someone else will have to help you with the actual JS if you need assistance there.