Is there a Javascript / Jquery library of a target delimiting an area in a specific DIV and blurring the rest?
Example
I added a new item to the menu and as soon as I loaded the screen a focus on it and blurred the rest to be in evidence?
Note: I think you will have to work with coordinates because you wanted to have the freedom to place this target anywhere on the screen
Hypothetical photo:
I made this template with only CSS, using a little JS you can do the way you want, just adapt to your situation there.
The idea is to put the btn element in the element that encloses all content, and when you click btn , remove the container content.
This is just an example, I used filter:blur() to make the dynamics of the thing ok
#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> You can work with the position and z-index property of CSS ... By clicking on the desired element you add a div with 100% with the desired background and set position and z-index above this div created to overlay the rest of the content.