How to darken all elements except a certain

Question

I am creating a google chrome extension, I am doing some work on the right side (in the stories of my friends), in fact, I am looking for specific stories of friends whose name appears in the input element after clicking the button. I need to darken / darken all the other elements that appear on the black frame in the picture, except for the correct element during the search, until it presses the X button

I do not know how to achieve all the other elements except one !: (

picture:

Answer 1

I found my codz! Lays the canvas on the screen and cuts a portion around the selected item. Just call openOverlay(elem) , where elem is the element you want to highlight.

 var padding = 5; //Space around canvas var animDelay = 250; //Delay used in CSS animation and transition for canvas.highlight var divs = document.getElementsByTagName("div"); for (var i = 0; i < divs.length; i++) { divs[i].addEventListener("click", function() { openOverlay(this); }, true); } function openOverlay(elem) { var loc = elem.getBoundingClientRect(); var canvas = document.createElement("canvas"); canvas.className = "highlight"; canvas.width = window.innerWidth; canvas.height = window.innerHeight; var ctx = canvas.getContext("2d"); ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.clearRect(loc.left - padding, loc.top - padding, loc.width + padding * 2, loc.height + padding * 2); document.body.appendChild(canvas); window.overlayCanvas = canvas; canvas.onclick = closeOverlay; } function closeOverlay() { delete window.overlayCanvas; this.style.opacity = 0; var self = this; setTimeout(function() { self.parentNode.removeChild(self); }, animDelay); } //Press X to close? window.addEventListener("keypress", function(e) { //120 is X if (e.which === 120 && window.overlayCanvas) closeOverlay.call(overlayCanvas); }, false); 

 /* necessary part */ canvas.highlight { position: absolute; display: block; top: 0; left: 0; opacity: 0.5; -webkit-transition: opacity 250ms ease; transition: opacity 250ms ease; -webkit-animation: canvasFade 250ms ease; animation: canvasFade 250ms ease; } @-webkit-keyframes canvasFade { from { opacity: 0; } to { opacity: 0.5; } } @keyframes canvasFade { from { opacity: 0; } to { opacity: 0.5; } } /* junk styling */ div { margin: 10px; width: 100px; height: 100px; display: inline-block; background: green; cursor: pointer; } div.funky { padding: 3px 8px; margin-top: 5.2px; border-bottom: 10px solid red; } 

 <div>One</div> <div>One</div> <div class="funky">One</div> <div>One</div>