CODEWITHSUNDEEP
javascripthtmlcss
MD. Jahid Hasan
MD. Jahid Hasan

Reputation: 19

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

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?

Upvotes: 1

Views: 995

Answers (3)

Simp4Code
Simp4Code

Reputation: 1479

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>

Upvotes: 1

Noam
Noam

Reputation: 1604

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.

Upvotes: 3

Abbas Shaikh
Abbas Shaikh

Reputation: 324

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

Upvotes: 3

Related Questions