Я намагаюся додати прозоре чорне накладення до зображення, коли миша наводиться на зображення, використовуючи лише CSS. Чи можливо це зробити? Я спробував це:
Але я не можу змусити розлучення з'явитися.
<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;
}
Ви були близькі. Це спрацює:
.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; }
Вам потрібно було навести :hover
на зображення, і зробити так, щоб .overlay
покрив усе зображення, додавши right:0;
і bottom:0
.
jsfiddle:
.overlay
не має ні висоти, ні ширини, ні вмісту, і ви не можете навести курсор на display:none
.
Замість цього я дав div той же розмір і позицію, що і .image
і змінив значення RGBA
при наведенні.
.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); }
Я б дав min-height і min-width вашому оверлею div від розміру зображення, і змінив би колір фону при наведенні
.overlay { position: absolute; top: 0; left: 0; z-index: 200; min-height:200px; min-width:200px; background-color: none;}
.overlay:hover { background-color: red;}