Remove CSS Filter on Child Elements

Remove CSS filter on child elements

You can't do it that way. Childs are affected by their parent style.

That's how Cascading Style Sheets works.

I suggest you to use a pseudo-element to make it work like you want, so that only the pseudo-element would be affected.

See comments in the snippet:

.main {  position: relative;   /* Added */  width: 300px;  height: 300px;  list-style: none;}
.main::before {   /* Added */  content: '';  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  background-color: blue;  transition: 0.5s;}
.button {  position: absolute;  top: 35%;  height: 30px;  width: 120px;  display: none;  z-index: 99;  background-color: black;  color: white;}
.icon {  width: 30px;  position: absolute;  z-index: 99;  display: none;  width: 100px;}
.main:hover>.button {  display: block;  /* filter: none; Commented */}
.main:hover>.icon {  display: block;  /* filter: none; Commented */}
.main:hover::before {   /* Modified */  filter: brightness(50%);}

<li class="main">  <img src="https://help.seesaw.me/hc/en-us/article_attachments/204081043/bear.png" class="icon" />  <a class="button" href="#">Button</a></li>

How do I clear a filter placed by a parent element in CSS?

You won't be able to reset the filter for the child element, but you can encase both in a container div, then position the <p> accordingly.

.container-div {  position: relative;}
.artistDetailImage {  background-size: cover;  background-position: top;  width: 100%;  height: 300px;  filter: contrast(60%);}
.artistDetailText {  width: 100%;  font-size: 20px;  text-align: left;  padding-left: 5px;  position: absolute;  top: 240px;  color: white;}

<div class="container-div">  <div class="artistDetailImage" style="background-image: url('http://static.pexels.com/photos/33688/delicate-arch-night-stars-landscape.jpg');">  </div>  <p class="artistDetailText">NAME</p></div>

How to blur(css) div without blur child element

How to disable blur on child element?

.enableBlur>* {  filter: blur(1.2px);}
.disableBlur {  filter: blur(0);}

<div class="enableBlur">  <hr>  qqqqq<br>  <span>qqqqq</span><br>  <hr  class="disableBlur">  <div>aaaaa</div>  <div>bbbbb</div>  <div class="disableBlur">DDDDD</div>  <hr>  <img src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48">  <img class="disableBlur" src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48"></div>

How to remove property from a child element?

Demo: https://jsfiddle.net/z63b6qwL/

You can't remove filter from child element, but you can change your html and css a little:

HTML:

<div>
  <input type="checkbox" class="ckbx" id="bike">
  <label for="bike"><span class="image"></span><span class="text">I have a bike</span></label>
</div>      

CSS:

.ckbx {
  display: none;
}
.ckbx + label > .image {
  background: url('https://pixabay.com/static/uploads/photo/2012/04/11/12/08/check-mark-27820_960_720.png') no-repeat;
  background-size: 100%;
  height: 50px;
  width: 50px;
  padding: 0px;
  display: inline-block;
  filter: grayscale(100%) opacity(30%);
  vertical-align: middle;
}
.ckbx:checked + label > .image {
  filter: none;
}
label span.text {
  margin-left: 5px;
  display: inline-block;
  width: 200px;
}

Disable Blur filter on child containers

A few notes:

• there is no background HTML tag,
• when you are applying filters remember to not only use the -webkit-
• there is no font-face attribute to declare the font you are using, instead you should use font-family

With this in mind, a solution for your problem is creating a empty child div and applying the filter to that same empty div which must have a lower z-index then its siblings (as you already had)

Here is a snippet:

@font-face {  font-family: "Candy";  src: url('font/Candy.otf') format("opentype");}@font-face {  font-family: "DancingScript";  src: url('font/DancingScript.ttf') format("truetype");}body {  margin: 0;  padding: 0;}div {  position: absolute;  background: url("http://rusticrentals.oldtreasuresfurniture.com/images/cover_page.jpg") no-repeat;  display: block;  height: 100%;  width: 100%;  z-index: 0;  -moz-filter: blur(10px);  -o-filter: blur(10px);  -ms-filter: blur(10px);  filter: blur(10px);}
header {  font-family: "Candy";  font-size: 150px;  text-align: center;  color: #FFF;}nav {  color: #FFF;  font-family: "DancingScript";  font-size: 25px;}nav ul {  list-style: none;  margin: 0;  padding: 0;}nav li {  display: inline-block;}header,nav {  display: block;  position: relative;  z-index: 9999;}

<main>  <div></div>  <header>Rustic Rentals</header>  <nav>    <ul>      <li>Rentals</li>      <li>Sales</li>      <li>Contact</li>    </ul>  </nav></main>

---

Related Topics