2

Tengo dos div posicionados uno encima del otro. En cada div tengo una foto. En la primera aparece la cara de una persona desenfocada y encima (en el otro div) un archivo png donde parece un texto que pone TOP SECRET. Mi idea es que al hacer un hover la imagen del TOP SECRET desaparezca y la imagen del rostro se enfoque.

HTML

<div id="div2">
    <img src="mySelf.png" id="mySelf">
</div>
<div id="div2y5">
    <img src="topSecret.png" id="topSecret">
</div>

CSS

#mySelf{
width: 200px;
height:: 200px;
margin: 0 auto;
padding-top: 50px;
filter: blur(5px);
}

#mySelf:hover{
margin: 0 auto;
padding-top: 50px;
filter: none;
}

#topSecret{
padding-top: 77px;
padding-left: 33px
}

#topSecret:hover{
padding-top: 77px;
padding-left: 33px;
visibility: hidden
}

#div2{
width: 200px;
}

#div2y5{
width: 200px;
}

#div2 img{
float: right;
position:absolute;
visibility:visible;
}

#div2y5 img{
float: right;
position:absolute;
visibility:visible;
}

Estoy tratando de hacer el hover sobre todo el espacio que ocupa el contenedor del div tanto en div2 y en div2y5 ya que al hacerlo sobre imagenes al ser un png cuando tengo el raton sobre el texto me hace el efecto pero no me aplica el over en la imagen del rostro que tiene debajo. Las trata independiendemente por eso queria hacerlo en el div. Y en caso de tener encima el raton me aplique el efect a ambas imagenes

ejemplo

Te adjunto el link de las dos imagenes sueltas: https://i.sstatic.net/qXCFp.jpg

2
  • ¿tienes el par de imágenes de ejemplo?, además de la parte que posiciona el las imágenes una sobre otra
    – Rene Limon
    Commented el 4 oct. 2017 a las 17:42
  • Actualice la pregunta, he añadido todo el css que hace referencia a esos div e imágenes y un enlace al final del post con las dos imagenes Commented el 4 oct. 2017 a las 17:52

2 respuestas 2

2

Modificando un poco tu estructura solo necesitas algunos cambios.

Ejemplo

.photo {
  height: 200px;
  margin: 50px auto;
  position: relative;
  width: 200px;
}
/* Contenedor de la imagen */
.photo-container {
  height: 100%;
  filter: blur(5px);
  transition: all .45s ease;
  width: 100%;
}
/* Banner de la imagen */
.photo .photo-banner {
  left: 50%;
  transition: all .45s ease;
  position: absolute;
  top: 25px;
  transform: translateX(-50%);
}
/* Cuando se haga hover sobre el contenedor */
.photo:hover > .photo-container {
  filter: blur(0);
}
.photo:hover > .photo-banner {
  opacity: 0;
}
<div class="photo">
  <div class="photo-container">
    <img src="https://i.imgur.com/V45J1Wu.png" alt="">
  </div>
  <div class="photo-banner">
    <img src="https://i.imgur.com/IY5EYTc.png" alt="">
  </div>
</div>

1
  • <p1>muy Buena esa , gracias, es lo que buscaba.</p>
    – quindiano
    Commented el 20 nov. 2020 a las 4:49
1

Así es cómo debería funcionar:

#mySelf{
width: 200px;
height:: 200px;
margin: 0 auto;
padding-top: 50px;
filter: blur(5px);
}

.wrapper:hover #mySelf{
margin: 0 auto;
padding-top: 50px;
filter: none;
}

#topSecret{
padding-top: 77px;
padding-left: 33px
}

.wrapper:hover #topSecret{
padding-top: 77px;
padding-left: 33px;
visibility: hidden
}

#div2{
width: 200px;
}

#div2y5{
width: 200px;
}

#div2 img{
float: right;
position:absolute;
visibility:visible;
}

#div2y5 img{
float: right;
position:absolute;
visibility:visible;
}
<div class="wrapper">
  <div id="div2">
    <img src="https://i.imgur.com/V45J1Wu.png" id="mySelf">
  </div>
  <div id="div2y5">
    <img src="https://i.imgur.com/IY5EYTc.png" id="topSecret">
  </div>
</div>

Explicación: Puse un div (wrapper) que envuelve a los divs (div2 y div2y5) y sobre ese aplicamos el hover del css. Por ejemplo:

.wrapper:hover #topSecret{
   visibility: hidden
}

al hacer over sobre .wrapper cambiamos visibilidad de #topSecret. Lo mismo sucede en el caso de .wrapper:hover #mySelf{filter: none;}

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.