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