Cómo - Título de superposición de imagen
Aprenda a crear un título de superposición de imagen al pasar el mouse.
Título de superposición de imagen
Pase el cursor sobre la imagen para ver el efecto de superposición.
Cómo crear un título de imagen de superposición
Paso 1) Agregar HTML:
Ejemplo
<div class="container">
<img src="img_avatar.png" alt="Avatar"
class="image">
<div class="overlay">My Name is John</div>
</div>
Paso 2) Agregar CSS:
Ejemplo
* {box-sizing: border-box}
/* Container
needed to position the overlay. Adjust the width as needed */
.container {
position: relative;
width:
50%;
max-width: 300px;
}
/* Make the image to responsive */
.image {
display: block;
width: 100%;
height: auto;
}
/*
The overlay effect - lays on top of the container and
over the image */
.overlay {
position: absolute;
bottom: 0;
background: rgb(0, 0, 0);
background: rgba(0,
0, 0, 0.5); /* Black see-through */
color: #f1f1f1;
width: 100%;
transition: .5s ease;
opacity:0;
color: white;
font-size: 20px;
padding: 20px;
text-align: center;
}
/* When you mouse over the container, fade
in the overlay title */
.container:hover .overlay {
opacity: 1;
}
Sugerencia: vea también otros efectos de superposición de imágenes (desvanecimiento, deslizamiento, etc.) en nuestro Cómo - Superposición de desplazamiento de imagen .
Go to our CSS Images Tutorial to learn more about how to style images.