Comment - Titre de superposition d'image
Apprenez à créer un titre de superposition d'image au survol.
Titre de superposition d'image
Survolez l'image pour voir l'effet de superposition.
Comment créer un titre d'image de superposition
Étape 1) Ajoutez du HTML :
Exemple
<div class="container">
<img src="img_avatar.png" alt="Avatar"
class="image">
<div class="overlay">My Name is John</div>
</div>
Étape 2) Ajoutez CSS :
Exemple
* {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;
}
Conseil : consultez également d'autres effets de superposition d'image (fondu, glissement, etc.) dans notre tutoriel - Image Hover Overlay .
Go to our CSS Images Tutorial to learn more about how to style images.