remove blur effect on child element

Question

I have a <div> with an background-image with blur effect.

-webkit-filter: blur(3px); -moz-filter: blur(3px); -o-filter: blur(3px); -ms-filter: blur(3px); filter: blur(3px); 

The only problem is that all the Child elements also get the blur effect. Is it possible to get rid of the blur effect on all the child elements??

<div class="content">     <div class="opacity">         <div class="image">             <img src="images/zwemmen.png" alt="" />         </div>         <div class="info">              a div wih all sort of information         </div>     </div> </div>       .content{         float: left;         width: 100%;         background-image: url('images/zwemmen.png');         height: 501px;         -webkit-filter: blur(3px);         -moz-filter: blur(3px);         -o-filter: blur(3px);         -ms-filter: blur(3px);         filter: blur(3px);     }      .opacity{         background-color: rgba(5,98,127,0.9);         height:100%;         overflow:hidden;     } .info{     float: left;     margin: 100px 0px 0px 30px;     width: 410px; } 

http://jsfiddle.net/6V3ZW/

Answer 1

Create a div inside content & give bg image & blur effect to it. & give it z-index less the the opacity div, something like this.

<div class="content">     <div class="overlay"></div>     <div class="opacity">         <div class="image">             <img src="images/zwemmen.png" alt="" />         </div>         <div class="info">              a div wih all sort of information         </div>     </div> </div> 

Use Css

.content{     float: left;     width: 100%; }  .content .overlay{     background-image: url('images/zwemmen.png');     height: 501px;     -webkit-filter: blur(3px);     -moz-filter: blur(3px);     -o-filter: blur(3px);     -ms-filter: blur(3px);     filter: blur(3px);     z-index:0; }  .opacity{     background-color: rgba(5,98,127,0.9);     height:100%;     overflow:hidden;     position:relative;     z-index:10; } 

Answer 2

Add an overlay something like this:

<div class="overlay"></div> 

Then:

.overlay {   position: fixed;   top: 0;   left: 0;   width: 100%;   height: 100%;   backdrop-filter: blur(2px) sepia(50%);   z-index: 9999999999999999999; } 

Here the parent child relationship is not what matters. The z-index is important.

It will apply the filter to anything sitting behind the div.