Comment puis-je afficher du texte sur une image en survol en utilisant du texte réel ?

Afficher le texte au survol à l'aide de texte réel

Vous pouvez afficher du texte sur une image au survol en utilisant du texte réel au lieu de sprites d'image. Voici comment :

Enveloppez l'image et la description que vous souhaitez voir apparaître au survol dans un conteneur div. Ce div doit avoir les mêmes dimensions que l'image.

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

Attribuez le CSS suivant au conteneur div (.img__wrap) :

.img__wrap {
  position: relative;
  height: [Set to match image height];
  width: [Set to match image width];
}

Positionnez la description textuelle de manière absolue dans le conteneur div (.img__description).

.img__description {<br> position : absolue;<br> haut : 0 ;<br> bas : 0;<br> gauche : 0;<br> droite : 0;<br> fond : rgba(0, 0, 0, 0.7);<br> couleur : #fff;<br> visibilité : cachée;<br> opacité : 0;<br>}</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></div>
</div>

Make the text description visible and opaque on hover by adding the following CSS:

<div>

Copier après la connexion

< /div>

Avec cette solution, votre description textuelle apparaîtra sur l'image lorsque l'utilisateur survole.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!