0

I have a page with popup displayed onload. The whole site is in greyscale but I want to popup div to be in non-greyscale. I have tried with filter: none or -webkit-filter: grayscale(0); but it is not working that the whole page is in greyscale. Does anyone have any idea on it? Thanks!

-webkit-filter: grayscale(0) !important;
filter: grayscale(0) !important;

My code: Jsfiddle

Mohammed Wahed Khan
  • 836
  • 2
  • 14
  • 35
Sammi
  • 261
  • 5
  • 20
  • 2
    Possible duplicate of [Want to make the whole page in grayscale except specified div](https://stackoverflow.com/questions/26087286/want-to-make-the-whole-page-in-grayscale-except-specified-div) – ceejayoz Dec 01 '17 at 04:14
  • Hi Sammi, To achieve the said requirement, one of the options is to create an overlay div on top of the body. You can make it grayscale, instead of body. Later display your popup with `z-index` +1 than the overlay. Since you are applying grayscale to body, the popup also inheriting (being a descendant of the body) same styles. – CuriousMind Dec 01 '17 at 04:21
  • @Sammi you can also do this by putting your all website code in a .filter escape the popup code. Then after you can use whatever filter in your filter class. – Harden Rahul Dec 01 '17 at 05:19
  • @CuriousMind I have tried to create one div with filter, but still not working – Sammi Dec 01 '17 at 05:22
  • @HardenRahul can you explain more I can’t quite get what you mean, you mean only apply the filter except my popup class? – Sammi Dec 01 '17 at 05:23

1 Answers1

2

-webkit-filter isn't a property that cascades down and can be overwritten, it's applied on top of the whole element and its children. If you put a filter on the children, it stacks on top of the parent's filter.

Instead, you'll need to put the filter on an element that is the parent of all the things you want grayed out.

div {
  height: 20px;
  position: relative;
}
<div>
  <div style="-webkit-filter: grayscale(1)">
    <div style="background: red">Sample</div>
    <div style="background: blue">Sample</div>
  </div>
  <div style="background: green; position: absolute; top: 10px;">Sample</div>
</div>
Domino
  • 6,314
  • 1
  • 32
  • 58