Jeg prøver å legge til et gjennomsiktig svart overlegg på et bilde når musen svever over bildet med bare CSS. Er dette mulig? Jeg har prøvd dette:
Men jeg kan ikke få div til å dukke opp.
<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;
}
Du var i nærheten. Dette vil fungere:
.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; }
Du må sette :hover
på bildet, og få .overlay
til å dekke hele bildet ved å legge til right:0;
og bottom:0
.
jsfiddle:
.overlayikke har noen høyde eller bredde og ikke noe innhold, og du kan ikke holde musepekeren over
display:none`.
Jeg ga i stedet div samme størrelse og posisjon som .image
og endrer RGBA
-verdien ved musepekeren.
.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); }
Jeg ville gi en min-høyde og min-bredde til din overlegg div av størrelsen på bildet, og endre bakgrunnsfargen på 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;}