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>
<pre class="brush:php;toolbar:false"></div>
</div>

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

<div>

< /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!

css using class this display position background http

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn