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
Te adjunto el link de las dos imagenes sueltas: https://i.sstatic.net/qXCFp.jpg