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:
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;
}
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:
.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.
.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); }
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;}