html - selectivo - efecto bokeh

eliminar el efecto de desenfoque en el elemento hijo

Question

Tengo un <div> con una imagen de fondo con efecto de desenfoque.

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

El único problema es que todos los elementos secundarios también obtienen el efecto de desenfoque. ¿Es posible deshacerse del efecto borroso en todos los elementos secundarios?

<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

Crea una división dentro del contenido y dale un efecto de imagen y desenfoque. Y dale el índice z menos el div opacidad, algo como esto.

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

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