Comment puis-je afficher du texte sur une image en survol en utilisant uniquement HTML et CSS ?

Affichage du texte au survol à l'aide de HTML et CSS

Dans la conception Web, l'ajout d'un texte descriptif qui apparaît lorsqu'un utilisateur survole une image améliore expérience utilisateur. Ce texte fournit des informations précieuses sur l'image, créant une expérience de navigation interactive et engageante.

Obtenir cet effet uniquement en utilisant HTML et CSS est relativement simple. Voici comment procéder étape par étape :

1. Enveloppez l'image et le texte survolé dans un div conteneur :
   Créez un div autour de l'image et du texte. qui apparaîtra au survol. Ce div doit avoir la même hauteur et la même largeur que l'image.
2. Positionnez le texte de survol absolument dans le div du conteneur :
   À l'aide de CSS, positionnez le texte de survol absolument dans le div du conteneur. . Définissez sa position sur absolue, avec le haut, le bas, la gauche et la droite définis sur 0 pour s'aligner correctement dans l'image. Dans un premier temps, définissez sa visibilité sur caché et son opacité sur 0.
3. Ajustez l'effet de survol :
   Enfin, utilisez un effet de survol sur le div du conteneur pour révéler le texte de survol. Lorsque l'utilisateur survole l'image, le texte survolé doit devenir visible et totalement opaque en définissant sa visibilité sur visible et son opacité sur 1.

 réinitialisation rapide </em>/</p><ul><li>{<br>marge : 0;<br>padding : 0;<br>border: 0;<br>}</li></ul><p>/<em> styles pertinents </em>/<br>.img__wrap {<br> position : relatif;<br> hauteur : 200px;<br> largeur : 257px;<br>}</p><p>.img__description {<br> position : absolue;<br> haut : 0;<br> bas : 0;<br> gauche : 0;<br> droite : 0 ; <br> arrière-plan : rgba(29, 106, 154, 0,72);<br> couleur : #fff;<br> visibilité : cachée;<br> opacité : 0;</p><p>/<em> effet de transition. pas nécessaire </em>/<br> transition : opacité .2s, visibilité .2s;<br>}</p><p>.img__wrap:hover .img__description {<br> visibilité : visible;<br> opacité : 1; <br>}

 <img class="img__img" src="http://placehold.it/257x200.jpg" /><br> <p></div>