How to focus on a specific DIV and blur the rest

Question

Is there a Javascript/Jquery library that of a targetdelimiting an area in a DIV specific and blur the rest ?

Example

I added a new item to the menu and as soon as I loaded the screen this one focus on top and blurred the rest to stay in evidence ?

Note: I believe you will have to work with coordinates because you wanted to have the freedom to put this target anywhere on the screen

Hypothetical photo:

Answer 1

I made this model only with CSS, using a little JS you can do the way you want, just adapt to your situation there.

The idea and put in the element that encompasses all the content a filter:blur(), and when you click on btn vc removes the filter from container which has the rest of the content.

This is just an example, I used label + input to make the dynamics of the ok thing

#btn {
  display: none;
}
#btn:checked + .holder .fake {
  display: none;
}
#btn:checked ~ .blur {
  filter: blur(0);
}
.holder {
  position: relative;
  z-index: 2;
}
.btn {
  width: 60px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #000;
  color: #fff;
  position: absolute;
  cursor: pointer;
}
.blur {
  filter: blur(6px);
}

<input type="checkbox" id="btn">

<div class="holder">
  <label class="btn">btn</label>
  <label class="btn fake" for="btn">btn</label>
</div>  
<div class="blur">
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Praesentium maiores vero asperiores quisquam assumenda laudantium quidem esse dolores. Voluptatem velit et officia iste. Autem corrupti, asperiores in maxime alias explicabo.</p>
  <img src="https://unsplash.it/300/100" alt="">
  <p>Possimus quo alias veniam! Obcaecati ea ipsam unde, sit dolorum architecto, deserunt in aperiam recusandae neque qui officia minus provident. Similique adipisci recusandae facere reiciendis cupiditate repellat, dolores nisi maxime?</p>
  <img src="https://unsplash.it/200/100" alt="">
  <p>Porro, harum repudiandae dolores praesentium ducimus pariatur voluptate, nihil doloremque ratione obcaecati inventore laboriosam veritatis. Minima dolore molestiae tempore repellendus consequatur quisquam voluptates, incidunt repellat accusantium eaque? Magni, totam! Animi.</p>
  <p>Sunt delectus odit facere impedit officiis, ea rerum nobis nesciunt iure atque quisquam, maiores, tempore earum suscipit eaque nihil nostrum. Nihil quaerat laborum adipisci autem veritatis vero recusandae reiciendis voluptatem!</p>
  <p>Sequi enim commodi culpa impedit quos nostrum repudiandae consequatur ullam. Quaerat necessitatibus repellat odio, velit eos beatae iste eaque sed quas, consequuntur doloremque iure voluptate totam asperiores culpa. Perferendis, odio.</p>
  <p>Aspernatur eius rerum harum necessitatibus natus repellendus sit optio perspiciatis voluptatum, consectetur corporis magnam adipisci debitis, voluptatem ea aliquam quaerat explicabo. Sit atque quas tempore assumenda tempora nam culpa non?</p>
  <p>Sed, dolor architecto. Error voluptate exercitationem beatae accusamus id voluptatum modi architecto nemo harum eveniet ex totam, blanditiis dolorum deleniti, est necessitatibus? Consequatur blanditiis nulla quod pariatur sed adipisci nisi?</p>
  <p>Itaque laudantium alias, vel placeat cupiditate omnis, possimus aut, corrupti at suscipit nostrum veritatis fuga consequuntur aliquid reiciendis laboriosam! Beatae, et ratione atque neque assumenda sunt ut laborum laboriosam ad!</p>
  <p>Amet autem omnis atque provident facere praesentium sint, consequuntur illum adipisci libero assumenda vero natus quis reiciendis hic alias iure nemo, quaerat, sequi ex! Consequuntur voluptates excepturi tempore esse repellendus.</p>
  <p>Sapiente consequuntur recusandae soluta debitis sequi totam ratione obcaecati veritatis laborum deserunt, incidunt quae quia nostrum harum illum quaerat ipsum a deleniti vel voluptatibus vitae! Commodi rerum reiciendis quas magni?</p>
</div>

Answer 2

You can work with the property position and z-index CSS... By clicking on the desired element you add a 100% div with the desired background and define the position and the z-index above this div created to overwrite the rest of the content.