6

I cant disable this property on my child element. Is there a way to disable this property on the box?I can't move this element out of the parent.

.full {
  width:100vw;
  height:100vh;
  filter:blur(2px);
}

.box {
  border:1px solid black;
  width:50px;
  height:50px;
  margin:5px;

}

.non-blur{
  filter:none;
}
<div class="full">
  <div class="box">Blured</div>
  <div class="non-blur box">Clean</div>
</div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Jan Ciołek
  • 1,796
  • 3
  • 17
  • 32
  • Can you just apply the blur property directly to the `.box` instead of the parent? – Marcelo Sep 14 '17 at 18:19
  • Its just simple example,the parent container is a body element in my case.Hard to do. – Jan Ciołek Sep 14 '17 at 18:20
  • 4
    this is something that is *not* possible... apply `filter` on `.box:not(.non-blur)` – kukkuz Sep 14 '17 at 18:21
  • 5
    You can't have a child element ignore the parent's blur. Essentially the only option is to have two divs inside the parent, one for blur and one for not-blur. [This](https://stackoverflow.com/questions/28975673/how-to-blurcss-div-without-blur-child-element) page goes into it in a little more detail. – A. W. Sep 14 '17 at 18:23
  • 1
    Try do this https://jsfiddle.net/8r68ktdk/ – Filipe Machado Carneiro Sep 14 '17 at 18:33

0 Answers0