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!

source：php.cn

Article précédent：Comment puis-je superposer une couleur sur une image d’arrière-plan en utilisant uniquement CSS ? Article suivant：Pourquoi une balise d'ancrage ajoute-t-elle un espace sous une image dans un div avec bordure ?

Déclaration de ce site Web

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

0

3

2194

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

0

11

2344

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

0

1

1964

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...

Depuis 2024-04-18 23:52:34

0

1

1853

Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel

Depuis 2024-04-16 10:10:18

0

0

1912

Rubriques connexes

Plus>

• Quel est le format du caj
• Introduction aux commandes pour créer de nouveaux fichiers sous Linux
• Comment acheter du Dogecoin
• Qu'est-ce que l'espace libre
• Quel logiciel est Xiaohongshu ?
• Comment définir le retour à la ligne automatique dans Word
• Comment ouvrir le format jsp
• Quels sont les outils d'attaque DDoS ?