remove blur effect on child element

Question

I have a

with an background-image with blur effect.

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


        

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.

    

    

        

            
        
        

             a div wih all sort of information
        
    

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