3

Tengo un banner y sobre él una imagen tipo avatar. He intentado agregar el efecto blur a mi banner pero tengo un error ya que el efecto se realiza sobre mi avatar y no sobre mi banner.

Para entender lo que deseo les comparto mi JSFiddle.

Éste es mi código:

.fondo_banner {
  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;
  margin: 0 auto 1em;
  position: relative;
  height: 240px;
}

.overlay_fondo_banner {
  background-color: rgba(69, 90, 100, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*filter: blur(15px);*/
}

#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;
}
<div class="fondo_banner">
  <div class="overlay_fondo_banner">
    <div id="pUsuario_avatar">

    </div>
  </div>
</div>

3 respuestas 3

4

El problema es que el efecto blur se aplica a todo el elemento (incluidos descendientes). Como el avatar está dentro del div al que le pones el efecto blur, el avatar también va a estar borroso.

Una solución sería mover el avatar fuera del elemento al que vas a hacer blur (crear un contenedor para todo). Además, el efecto blur se debería aplicar al div que contiene la imagen de fondo para que se vea borrosa (al que también le pondrás una posición absoluta para que ocupe todo el tamaño del padre).

Algo como esto:

#banner {
  position: relative;
  height: 240px;
  /* truco para que el avatar respete los 15px de margen superior */
  border-top:1px solid transparent; 
}

.fondo_banner {
  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;
  margin: 0 auto 1em;
  position: absolute;
  height: 100%;
  width: 100%;
  filter: blur(5px);
}

.overlay_fondo_banner {
  background-color: rgba(69, 90, 100, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#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;
  filter: blur(0);
}
<div id="banner">
  <div class="fondo_banner">
    <div class="overlay_fondo_banner">
    </div>
  </div>
  <div id="pUsuario_avatar"></div>
</div>

1
  • 1
    Muchas gracias Alvaro por tu respuesta y la edicion de mi pregunta :D
    – Dimoreno
    Commented el 26 ene. 2018 a las 21:08
1

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

1
  • Muchas gracias por tu aporte amigo :D :D Tambien es una excelente respuesta :D Recomendado
    – Dimoreno
    Commented el 30 ene. 2018 a las 2:05
0

creo que lo que buscas es lo siguiente:

Para este tipo de efectos es necesario el uso del posicionamiento con sus respectivos z-index.

#fondo_banner{
  position:relative;
  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;
  height: 240px;
  width: 100%;
  z-index: -5;
}
#overlay_fondo_banner{
  position:absolute;
  background-color: rgba(69, 90, 100, 0.6);
  top:0;
  left:0;
  right:0;
  bottom:0;
  width: 100%;
  height: 100%;
  filter: blur(15px);
  z-index:-1;
}
#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;
}
<div id="fondo_banner">
  <div id="overlay_fondo_banner"></div>
  <div id="pUsuario_avatar">
    
  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.