Lorsque vous mettez des images sur votre site, elles doivent souvent être accompagnées d’un texte explicatif, des crédits, etc. D’un point de vue design, cela peut se faire de diverses manières, autre que juste mettre le contenu en dessous de l’image. Une technique très courante est de faire apparaître ce contenu par dessus l’image, lors du survol de celle-ci. Nous allons voir comment réaliser cela, seulement avec du CSS.
Sommaire :
Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.
Trouver un développeur web
Le HTML
Voici le code HTML :
<div class="overlay-image">
<img src="https://www.codeur.com/tuto/wp-content/uploads/2022/02/p1-1-300x200.jpg" alt="Overlay Image">
<div class="hover-image">
<h3>Lorem ipsum sic amet.</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
.overlay-image sera notre div englobante. Tous les autres styles se feront relativement à cette classe. A l’intérieur, deux éléments : une balise img, qui sera l’image à survoler, et .hover-image, qui sera le contenu s’affichant au survol. Dans cette dernière, vous pouvez mettre ce que vous voulez voir apparaître, généralement du texte descriptif.
Le CSS
Et le CSS, commenté :
.overlay-image {
position: relative; /* Important pour positionner le contenu par dessus, relatif à l'élément */
display: inline-block; /* Prendra la forme de son contenu */
}
.overlay-image img {
vertical-align: middle; /* Ou display: block, pour enlever l'espace blanc */
}
.overlay-image .hover-image {
/* Positionnement du contenu hover */
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* Effets de transition */
opacity: 0; /* On cache l'élément via son opacité */
transition: opacity 0.25s ease-in-out; /* Effet de transition sur le hover */
/* Style du contenu hover */
background-color: rgba(255,0,0,0.6); /* Couleur par défaut */
color: white;
padding: 30px;
/* Centrer le contenu */
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
}
.overlay-image:hover .hover-image {
opacity: 1; /* Lors du hover, on remet l'opacité à 1 */
}
.overlay-image est en position relative, et s’adaptera à son contenu : une balise img. C’est important, car .hover-image est en position absolute (top, bottom, etc sont mis à 0 pour que cela s’adapte correctement), et se positionnera donc relativement à .overlay-image, et indirectement fera la taille de l’image.
.hover-image possède des styles (un background-color avec une légère opacité, du padding, du flex, etc), mais surtout, opacity: 0. Cette propriété va cacher l’élément, on ne verra donc plus que l’image. Nous avons besoin du sélecteur CSS :hover, pour changer les propriétés lors du survol. .overlay-image:hover .hover-image indique ce qui va se passer sur .hover-image, lors du survol de .overlay-image. A l’intérieur de ce sélecteur, on remet l’opacité à 1. A partir de ce moment, lorsque vous passez votre souris par dessus l’image, le contenu s’affichera de manière brute.
Pour vos visiteurs, il serait plus agréable de mettre une transition CSS lors du survol. Dans notre exemple : transition: opacity 0.25s ease-in-out. D’abord, on précise la propriété CSS sur laquelle s’applique la transition (opacity), puis la durée de celle-ci (0,25s) et pour finir, le timing (ease-in-out). Plus d’informations sur cette propriété dans la documentation Mozilla.
Trouvez le meilleur développeur web sur Codeur.com
Vos premiers devis en 15 minutes
Gratuit et sans obligation
Déjà plus de 75 000 clients
Variantes
Suivant le contexte de vos sites, il ne faudra pas afficher le .hover-image de la même manière. Il est possible de créer d’autres classes complémentaires à celles vues précédemment, afin d’en modifier certaines propriétés.
<div class="overlay-image">
<img src="https://www.codeur.com/tuto/wp-content/uploads/2022/02/p2-Copie.jpg" alt="Overlay Image">
<div class="hover-image bg-blue">
<h3>Lorem ipsum sic amet.</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
<div class="overlay-image">
<img src="https://www.codeur.com/tuto/wp-content/uploads/2022/02/pexels-pixabay-235621.jpg" alt="Overlay Image">
<div class="hover-image bg-green">
<h3>Lorem ipsum sic amet.</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
/* Variantes de styles */
.hover-image.bg-blue {
background-color: rgba(0,0,255,0.6); /* Couleur par défaut */
}
.hover-image.bg-green {
background-color: rgba(0,255,0,0.6); /* Couleur par défaut */
}
Dans cet exemple, on fait varier la couleur du background, mais vous pouvez créer tous les types de variantes que vous désirez.
Voici une des manières de créer un survol sur des images. Au besoin, vous pouvez ne pas mettre de balise img, et plutôt mettre un background-image sur .overlay-image. Dans ce cas, il faudra préciser la largeur et la hauteur dans votre CSS.
Des difficultés à créer un overlay à vos images ? N’hésitez pas à demander de l’aide à un freelance sur Codeur.com !
