Hay una forma de lograrlo sin necesidad de agregar o alterar el html y es aprovechando los seudoselectores :before o :after
, si bien ya te dieron una solución (que es perfectamente valida), sugiero revises esta otra, que también puede ser interesante conocerla. :)
Mira:
.fondo_banner {
margin: 0 auto 1em;
position: relative;
height: 240px;
overflow: hidden;
}
.fondo_banner::before{ /*Esta es la imagen de fondo*/
content: '';
background-image: url(https://www.walldevil.com/wallpapers/a49/desktop-wallpaper-nepal-background-wallpapers.jpg);
background-repeat: no-repeat;
background-position: 100%;
background-size: cover;
display: block;
z-index: 1;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.fondo_banner:hover::before{
filter: blur(10px);
transition: all linear .5s;
}
.fondo_banner::after { /*esta es la capa overlay*/
content: '';
background-color: rgba(69, 90, 100, 0.6);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
display: block;
}
#pUsuario_avatar {
background-image: url(http://pia.az/photos/gffbff.jpg);
position: relative;
width: 85px;
height: 85px;
background-size: cover;
background-position: top center;
border-radius: 50%;
margin: 15px auto;
cursor: pointer;
z-index: 3;
}
<div class="fondo_banner">
<div id="pUsuario_avatar">
</div>
</div>
Lo primero que debes hacer para lograr esto mismo, es crear el selector de seudoelemento, que lo que hace en pocas palabras es generar otro elemento html, sin modificar el html (imagina las posibilidades jeje), esto lo creamos así:
.fondo_banner::before{}
Eso sí, no se verá nada a menos que le coloques que tipo de contenido va a tener dentro, en este caso no va a tener nada, así:
.fondo_banner::before{
content: '';
}
Ahora aunque va estar vacío, si que va a tener un fondo así que pasamos todos los datos de la imagen de background a este selector.
.fondo_banner::before{
content: '';
background-image: url(https://www.walldevil.com/wallpapers/a49/desktop-wallpaper-nepal-background-wallpapers.jpg);
background-repeat: no-repeat;
background-position: 100%;
}
Ahora hay que decirle que ocupe todo el elemento padre (el cual obligadamente debe tener un position: relative
, que en tu caso ya lleva), como en un principio este elemento es de tipo inline
no va a tomar el ancho y el alto, sin asignar primero que va a comportarse como un elemento bloque o (bloque en linea o si quieres flex, tabla, etc), una vez hagamos esto le podemos agregar una posición absoluta y un z-index, para el control de la capas.
.fondo_banner::before{
content: '';
background-image: url(https://www.walldevil.com/wallpapers/a49/desktop-wallpaper-nepal-background-wallpapers.jpg);
background-repeat: no-repeat;
background-position: 100%;
background-size: cover;
display: block;
z-index: 1;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
Y para que al pasar el hover, este se le agregue el desenfoque debes componer el selector así:
.fondo_banner:hover::before{
filter: blur(10px);
}
De hecho, esta tecnica es tan util, que incluso podrias prescindir del otro elemento en el html que hacia de capa de overlay, de hecho en el ejemplo lo hice.
La única pega (si es que podemos llamar inconveniente a esta técnica) es que solo tiene un máximo de creación (de momento) de hasta 2 elementos (after y before
).