Comment afficher du texte sur une image en survol en utilisant HTML et CSS ?

Affichage du texte au survol avec HTML et CSS

Dans votre quête pour afficher le texte sur les images au survol, vous avez d'abord eu recours à un sprite d'image -solution basée. Cependant, vous recherchez maintenant une approche plus propre en utilisant du texte réel.

La solution réside dans l'utilisation d'un élément div comme wrapper pour l'image et la description. Ce div doit posséder les mêmes dimensions que l'image. En manipulant le CSS, vous pouvez ensuite déterminer la visibilité de la description au survol du div.

Un extrait de code simplifié pour obtenir cet effet :

.image-wrapper {
  position: relative;
  height: [Image height];
  width: [Image width];
}

.image-description {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: [Description background color];
  color: [Description text color];
  visibility: hidden;
  opacity: 0;
  transition: visibility .2s, opacity .2s;
}

.image-wrapper:hover .image-description {
  visibility: visible;
  opacity: 1;
}

Dans le HTML :

<div class="image-wrapper">
  <img src="image.jpg" />
  <p class="image-description">This is the image description.</p>
</div>

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!