Comment puis-je créer des superpositions de survol d'images en utilisant uniquement CSS ?

Superpositions de survol d'images avec du CSS pur

En utilisant HTML et CSS, vous pouvez ajouter une superposition noire transparente à une image lorsque la souris survole il. Pour y parvenir sans utiliser d'élément de superposition, envisagez plutôt d'utiliser un pseudo-élément.

Enveloppez l'image avec le symbole

element :

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

Attribuez un positionnement relatif et des dimensions facultatives à .image :

.image {
  position: relative;
  width: 200px;  /* Optional */
  height: 200px;  /* Optional */
}

Définissez l'élément img enfant pour qu'il ait une largeur de 100 % et un alignement vertical.

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

Créez un pseudo élément pour afficher la superposition :

.image:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 1s;
}

Rendre la superposition visible en survol :

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

Maintenant, lorsque le curseur survole l'image, une superposition noire transparente apparaîtra en douceur.

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!

css html using this display

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn