¿Superposición de negro transparente en el hover de la imagen con sólo CSS?

Estoy intentando añadir una superposición negra transparente a una imagen siempre que el ratón pase por encima de la imagen sólo con CSS. ¿Es esto posible? He intentado esto:

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

Pero no consigo que aparezca el 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;
}
Eric Platon
Pregunta editada 4º agosto 2015 в 3:01
Programación
css3 css
19º agosto 2013 в 8:28
1 vista

Estuviste cerca. Esto funcionará:

.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; right:0; bottom:0; display: none; background-color: rgba(0,0,0,0.5); }
.image:hover .overlay { display: block; }

Necesitabas poner el :hover en la imagen, y hacer que el .overlay cubra toda la imagen añadiendo right:0; y bottom:0.

jsfiddle: http://jsfiddle.net/Zf5am/569/

Comentarios (1)

.overlay no tiene altura ni anchura y no tiene contenido, y no se puede pasar el ratón por encima de display:none.

En su lugar, le di al div el mismo tamaño y posición que .image y cambia el valor de RGBA al pasar el ratón.

http://jsfiddle.net/Zf5am/566/

.image { position: absolute; border: 1px solid black; width: 200px; height: 200px; z-index:1;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background:rgba(255,0,0,0); z-index: 200; width:200px; height:200px; }
.overlay:hover { background:rgba(255,0,0,.7); }
Comentarios (0)

Yo le daría un min-altura y min-ancho a su div de superposición del tamaño de la imagen, y cambiar el color de fondo en hover

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