Comment ajouter une superposition transparente noire avec du texte aux images en survol à l'aide de CSS ?

Ajout d'une superposition transparente noire aux images en survol à l'aide de CSS

Créer une superposition transparente noire sur une image en survol est réalisable en utilisant CSS. Voici un guide complet pour y parvenir :

Utiliser un pseudo-élément

Pour éviter le problème des éléments de superposition sur les éléments img inclus, vous pouvez insérer un pseudo-élément dans son lieu. Enveloppez l'élément img comme tel :

<div class="image">
  <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="">
</div>

Configurez le CSS :

.image {
  position: relative;
  width: 400px;
  height: 400px;
}
.image img {
  width: 100%;
  vertical-align: top;
}
.image:after {
  content: '\A';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 1s;
}
.image:hover:after {
  opacity: 1;
}

Ajout de texte au survol

Pour plus de simplicité, incluez du texte comme valeur de contenu du pseudo-élément :

.image:after {
  content: 'Your Text';
  color: #fff;
}

Vous pouvez également définir le texte dans un attribut data-* pour affichage de texte unique :

.image:after {
  content: attr(data-content);
  color: #fff;
}

<div data-content="Text to Display" class="image">
  <img src="/static/imghwm/default1.png" data-src="image.jpg" class="lazy" alt="">
</div>

Combinaison de superposition et de texte

Un style séparé permet un positionnement indépendant des éléments :

.image:after, .image:before {
  position: absolute;
  opacity: 0;
  transition: all 0.5s;
}
.image:after {
  content: '\A';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}
.image:before {
  content: attr(data-content);
  width: 100%;
  color: #fff;
  z-index: 1;
  bottom: 0;
  padding: 4px 10px;
  text-align: center;
  background: #f00;
  box-sizing: border-box;
}
.image:hover:after, .image:hover:before {
  opacity: 1;
}

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!