Superposition transparente noire au survol d'une image avec seulement CSS ?

Question

J'essaie d'ajouter une superposition noire transparente à une image lorsque la souris passe au-dessus de l'image, uniquement avec CSS. Cela est-il possible ? J'ai essayé ceci :

http://jsfiddle.net/Zf5am/565/

Mais je n'arrive pas à faire apparaître le div.

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
    <div class="overlay" />
</div> 

.image {
  position: relative;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}
.image img {
  max-width: 100%;
  max-height: 100%;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-color: red;
  z-index: 200;
}
.overlay:hover {
  display: block;
}

Answer 1

Voyez ce que j'ai fait ici : http://jsfiddle.net/dyarbrough93/c8wEC/

Tout d'abord, vous n'avez jamais défini les dimensions de la superposition, ce qui signifie qu'elle n'apparaissait pas en premier lieu. Deuxièmement, je vous recommande de modifier l'indice z de la superposition lorsque vous survolez l'image. Modifiez l'opacité / la couleur de la superposition en fonction de vos besoins.

.image { position: relative; width: 200px; height: 200px;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background-color: gray; z-index: -10; width: 200px; height: 200px; opacity: 0.5}
.image:hover .overlay { z-index: 10}

Answer 2

Vous pouvez y parvenir en jouant sur l'opacité de l'image et en définissant la couleur de fond de l'image sur le noir. En rendant l'image transparente, elle apparaîtra plus sombre.

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div> 

CSS :

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; background: black; }
.image img { max-width: 100%; max-height: 100%; }
.image img:hover { opacity: .5 }

Il se peut que vous deviez également définir l'opacité spécifique au navigateur pour que cela fonctionne également dans d'autres navigateurs.

Answer 3

Je donnerais une hauteur et une largeur minimales à votre div de recouvrement de la taille de l'image, et je changerais la couleur de fond au survol.

.overlay { position: absolute; top: 0; left: 0;  z-index: 200; min-height:200px; min-width:200px; background-color: none;}
.overlay:hover { background-color: red;}