Ik'm probeer een transparante zwarte overlay toe te voegen aan een afbeelding wanneer de muis boven de afbeelding zweeft met alleen CSS. Is dit mogelijk? Ik heb het volgende geprobeerd:
Maar ik krijg de div niet te zien.
<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;
}
Je was er dichtbij. Dit zal werken:
.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; }
Je moest de :hover
op de afbeelding zetten, en de .overlay
de hele afbeelding laten bedekken door right:0;
en bottom:0
toe te voegen.
jsfiddle:
.overlay
heeft geen hoogte of breedte en geen inhoud, en je kunt niet met de muis over display:none
gaan.
In plaats daarvan gaf ik de div dezelfde grootte en positie als .image
en verandert de RGBA
waarde bij hover.
.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); }
Ik zou een min-hoogte en min-breedte aan je overlay div geven van de grootte van de afbeelding, en de achtergrondkleur veranderen bij 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;}