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

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?

CodePudding user response：

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%);
}

CodePudding user response：

Add the filter just to the image when you hover the article, see the comment on the CSS below

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

/* CHANGED THIS */
article:hover img {
  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>

CodePudding user response：

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.