Comment afficher le texte au survol d'une image en utilisant HTML et CSS ?

Comment afficher le texte au survol d'une image ?

Afficher les informations de description lorsque vous survolez une image est une exigence courante. Cet article explique comment implémenter avec élégance cette fonctionnalité en utilisant HTML et CSS.

Problème

De nombreux développeurs utiliseront des sprites d'image et survoleront pour implémenter cette fonctionnalité. Cependant, cette méthode est loin d’être idéale et difficile à produire des effets précis. Par conséquent, cet article vous montrera comment utiliser du texte réel et non des images.

Solution

Réaliser cette fonctionnalité est simple. Enveloppez simplement l'image et survolez les informations de description dans un div avec les mêmes dimensions que l'image. Ensuite, utilisez CSS pour afficher la description lorsque le div est survolé.

Exemple de code

Ce qui suit utilise HTML et CSS Exemples de code pour implémenter cette fonctionnalité :

HTML :

<div class="img__wrap">
  <img class="img__img" src="image.jpg" />
  <p class="img__description">This image looks super neat.</p>
</div>

CSS :

/* quick reset */
* {
  margin: 0;
  padding: 0;
  border: 0;
}

/* relevant styles */
.img__wrap {
  position: relative;
  height: 200px;
  width: 257px;
}

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(29, 106, 154, 0.72);
  color: #fff;
  visibility: hidden;
  opacity: 0;

  /* transition effect. not necessary */
  transition: opacity .2s, visibility .2s;
}

.img__wrap:hover .img__description {
  visibility: visible;
  opacity: 1;
}

Dans l'exemple ci-dessus : "

<div class="img__wrap">

Encapsule l'image et les informations de description en un seul div, les dimensions de ce div sont les mêmes que l'image (200px de haut, 257px de large

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

Positionnez les informations de description au centre du div avant de survoler les informations de description

visibility: hidden;
opacity: 0;

.

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!