0

I want to reduce the brightness by everything on my page when I press a button, (filter: brightness(50%);) but I want 3 divs to remain the way they were. (The divs are called something along the lines of "popup1", "popup2" and "popup3"

Here's a snippet of my code.

function showPopups()
document.getElementById("bodyID").classList.add("darken");

.darken {
    filter: brightness(50%);
}

I have experimented with the :not syntax but haven't found any good websites/other stackoverflow questions that explains it well enough. Thanks in advance!

EDIT My :not method is looking like this right now:

.darken:not(.avoid) {
filter: brightness(50%);

}

while my divs look like this:

<div id="popupID1" class="popup1 avoid">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
Atoozee
  • 1
  • 1
  • 1
    have you checked out this? https://stackoverflow.com/questions/16201948/how-to-exclude-particular-class-name-in-css-selector – Stephan Bakkelund Valois Nov 20 '20 at 12:50
  • I tried some of them just now and it doesn't seem to work. I added an extra class to my divs called "avoid" and wrote .darken:not(.avoid) { } but no success there either. – Atoozee Nov 20 '20 at 13:05
  • What you want is not possible, not this way. A filter applies to an a element and _all_ its content - this is practially the same issue, as already often discussed for `opacity`, https://stackoverflow.com/q/5770341/1427878 While opacity has no “counter-action”, here you could of course try and reverse the effect of your filter on those specific elements, by applying a brightness filter with a factor > 100%, but you’d have to see if that brings a desirable result. – CBroe Nov 20 '20 at 13:24
  • That's a real shame. I have tried to add a brightness filter of over 100% to those divs but it becomes heavily saturated and ugly. – Atoozee Nov 20 '20 at 13:29

0 Answers0