estoy intentando hacer un efecto hover que pase desde una imagen con texto a la misma imagen pero con otro texto, no se si me explico. El problema es que no se por que al superponer la segunda imagen no se pone en el mismo sitio que la primera, sino un poco mas arriba, a pesar de que estoy poniendo la misma imagen. A parte estoy intentando que el primer hover ocupe el 66% del width de la pagina y el segundo hover el 33%.Mi codigo es el siguiente:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url("https://fonts.googleapis.com/css?family=Mystery+Quest");
.container2{
position:relative;
width:66.9%;
float:left;
}
.container3 {
position:relative;
width: 32.1%;
float:right;
}
.image {
}
.overlay {
position: absolute;
top: 1000;
bottom: 0;
left:0 ;
right: 0;
opacity: 0;
}
.container2:hover .overlay {
opacity: 1;
}
.container3:hover .overlay {
opacity: 1;
}
.text {
color: white;
font-size: 40px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
font-family: 'Noto Serif KR', serif;
}
</style>
</head>
<body>
<div class="container2">
<a href="marca.com"><img src="imagenes/imagen1.png" alt="jaj" class="image">
<div class="text">Texto 1</div>
<div class="overlay">
<a href="for-him"><img src="imagenes/imagen1.png" alt="me" class="image">
<div class="text">texto 2</div>
</div>
</div>
<div class="container3">
<a href="for-her"><img src="imagenes/imagen2.png" alt="jaj" class="image">
<div class="text">texto 1</div>
<div class="overlay">
<a href="feo.com"><img src="imagenes/imagen2.png" alt="me" class="image">
<div class="text">texto 2</div>
</div>
</div>
</body>
</html>
Muchas gracias