CSS peut-il créer une superposition noire transparente lors du survol de l'image ?

Superposition transparente noire sur le survol de l'image à l'aide de CSS : une approche approfondie

Requête :

Puis-je créer une superposition noire transparente qui apparaît lorsque je survole une image en utilisant uniquement CSS ?

Réponse :

Oui, vous pouvez obtenir un effet de superposition noir transparent lors du survol de l'image en utilisant CSS. Voici comment :

Approche alternative utilisant des pseudo-éléments :

Au lieu d'utiliser un élément de superposition, vous pouvez exploiter un pseudo-élément sur l'image. Cette méthode améliore la réactivité et la polyvalence :

HTML :

<div class="image">
    <img src="image.jpg" alt="" />
</div>

CSS :

.image {
  position: relative;
  /* Optional dimensions */
}

.image img {
  width: 100%;
  vertical-align: top;
}

.image:after {
  content: '\A';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: all 1s;
}

.image:hover:after {
  opacity: 1;
}

Explication :

• position : relative sur l'élément .image permet au pseudo-élément de se positionner par rapport à son parent.
• vertical-align : top fixe l'alignement de base sur l'image.
• Le pseudo-élément :after crée la superposition avec un positionnement absolu et un fond noir semi-transparent.
• Une transition d'opacité est appliquée pour une transition en douceur sur survol.

Ajout de texte au survol (facultatif) :

Pour afficher le texte au survol, définissez la propriété de contenu du pseudo-élément sur le texte souhaité :

.image:after {
  content: 'Hover Text';
  /* Other styling... */
}

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!