Comment puis-je créer un effet de survol pour afficher du texte sur une image à l'aide de HTML et CSS ?

Survolez pour révéler le texte sur les images avec HTML et CSS

Créer un effet de survol pour afficher du texte sur une image peut sembler une tâche ardue , mais avec l'aide de HTML et CSS, c'est un processus étonnamment simple.

Le problème : les sprites d'image avec des fonctionnalités limitées

De nombreux développeurs ont initialement recours à des sprites d'image, où différents états de survol sont affichés en déplaçant la position de l'image d'arrière-plan. Cependant, cette approche a des limites, car elle ne permet pas l'utilisation du texte réel.

La solution : superposition d'images transparentes

Pour obtenir l'effet souhaité, nous peut envelopper à la fois l'image et le texte survolé dans un seul conteneur avec exactement les mêmes dimensions que l'image. En utilisant CSS, nous positionnerons le texte de survol absolument dans ce conteneur et le rendrons invisible par défaut.

.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;
}

Lorsque l'utilisateur survole le conteneur, nous utilisons le survol CSS pour révéler progressivement le texte de survol :

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

Marquage HTML

<div class="img__wrap">
  <img  class="img__img lazy" src="/static/imghwm/default1.png" data-src="http://placehold.it/257x200.jpg" alt="Comment puis-je créer un effet de survol pour afficher du texte sur une image à l'aide de HTML et CSS ?" >
  <p class="img__description">This image looks super neat.</p>
</div>

Avec cette technique, vous pouvez facilement afficher du texte dynamique sur des images en survol, donnant à votre site Web une touche soignée et interactive.

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!