How to stop the child to inheriting the parents filter property?

user_15309462 0
Viewed 96

If I use the css filter property on the parent then It affecting the child too. I want to stop the child to not effect when I set the propert filter in parent.

article {
  width: 300px;
  height: 300px;
  
  position: relative;
}

article:hover {
  filter: contrast(110%);
}

img {
  width: 300px;
  height: 300px;
}

div {
  width: 200px;
  height: 50px;
  background: #FCDBA3;
  
  position: absolute;
  bottom:0;
}
<article>
  <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" />
  
  <div></div>
</article>

If you noticed carefully! You can see when I hover over the article then the div tag also affecting because of the filter property. But I don't want the div to get affected when I hover over the article.

How can I achieve it?

css html javascript
3 Answers

As far i understood you want to make hover effect in article tag but excluding the div element for that you can use this

article :not(div):hover{
  filter: contrast(110%);
}

instead of

article:hover {
  filter: contrast(110%);
}
user_126672830

You could always use backdrop-filter on a pseudo element, then a bit of z-index and you can create a class which is above the backdrop filter. See the example, any item with a class .noFilter will not be affected on hover

article {
  padding: 2rem;
  overflow: hidden;
  position: relative;
}
article::before {
  backdrop-filter: contrast(100%);

  content: "";
  display: block;

  position: absolute;
  inset: 0;
  z-index: 3;
  
  transition: backdrop-filter 500ms 0ms ease-in-out;
}

img {
  height: auto;
  width: auto;
  min-height: 100%;
  min-width: 100%;
  
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

div {
  background: #FCDBA3;
  padding: 0.5rem;
  width: 200px;
  
  position: relative;
  z-index: 2;
}
.noFilter {
  z-index: 4;
}

article:hover::before {
  backdrop-filter: contrast(150%);
}
<article>
  <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_960_720.jpg" />
  
  <div>Some content here</div>
  <div>Some content here</div>
  <div class="noFilter">Not affected by filter</div>
  <div>Some content here</div>
  <div class="noFilter">Not affected by filter</div>
  <div>Some content here</div>
  <div>Some content here</div>
</article>

user_192137250

In addition to the other helpful answers, since technically your question is "How to stop the child to inheriting the parents filter property?" the answer is that the child elements don't inherit the property but are affected by it, and there is no way to prevent it other than applying the filter to another element (as suggested on other answers).

To give an example with something similar but simpler, if you apply the opacity property with a value lower than 1 to an element, then there is no way for any child element to get a higher opacity than their parent element.

user_180318940
Related