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