A veces en nuestra página web queremos tener una imagen que cuando pasemos el ratón por encima aparezca un texto.
Si os pasáis por nuestra sección de Proyectos podéis ver a lo que nos referimos. Cada vez que pasamos con el ratón por encima de una imagen, se produce un efecto de transición en el que la imagen desaparece y aparece un bloque con un color y nos muestra un texto.
En este caso necesitamos tener el siguiente código de HTML
<div class="nuestrocontenedor">
<img src="nuestraimagen.png" alt="Avatar" class="nuestraimagen">
<div class="nuestrobloque">
<div class="nuestrotexto">Hello World</div>
</div>
</div>
Como veis tenemos un div que es nuestro contenedor, y dentro tenemos una imagen y otro bloque en el que tenemos otro div con nuestro texto.
Ahora vamos a ver que clases necesitamos para nuestro CSS.
Vamos primero de todo por la clase "nuestrocontenedor"
.nuestrocontenedor{
position: relative;
}
En este caso solo le indicamos que su posición es relative.
La siguiente clase que vamos a ver es "nuestraimagen"
.nuestraimagen{
display: block;
width: 100%;
height: auto;
}
En este caso le indicamos que se muestre como un block a tamaño completo.
La siguiente clase a mirar es "nuestrobloque"
.nuestrobloque{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 1.5s ease;
background-color: #c3ac76;
}
En esta clase le indicamos que la posición es absolute y que esta posicionada en la posición 0,0 y ocupando todo el tamaño del contenedor. Por otro lado, con opacity le indicamos que no se vea (0 quiere decir que sera transparente y 1 completamente visible). Le indicamos un color de fondo y la transición que queremos que haga, y cuanto tiempo durará la transición.
La siguiente clase es "nuestrotexto" donde le daremos las pautas al texto para posicionarlo
.nuestrotexto{
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
Como se puede ver, simplemente le damos color y tamaño y posicionamos.
Por último nos falta "la magia" del efecto, la clase que hará que se muestre el texto en vez de la imagen. Con lo que hemos hecho hasta ahora tenemos un bloque contenedor en el que hay una imagen y un texto con un fondo ocupando el mismo espacio. Pero este texto esta marcado como transparente así que no se ve.
Así que la clase que nos falta es la que gestionará este efecto, para ello utilizaremos la pseudoclase hover sobre el contenedor
.nuestrocontenedor:hover .nuestrobloque{
opacity: 1;
}
Como veis utilizamos el hover de la clase nuestrocontenedor y a la clase nuestrobloque le aplicamos el cambio de opacity, indicando que sea completamente opaco.
Esperemos que lo hayáis disfrutado