我试图在将鼠标悬停在此页面上的图像上时出现透明的黑色覆盖层:
不过我不确定我哪里出错了,因为这什么都不做。我希望叠加层在图像的两侧有一些填充,在调整网站大小时也会继续。
.photo-gallery div {
display: inline-block;
margin: 1%;
width: 31%;
position: relative;
}
.photo-gallery div a {
line-height: 0;
display: block;
}
.overlay {
position: absolute;
z-index: 200;
width: 90%;
height: 90%;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
background-color: rgba(0, 0, 0, 0.7);
}
.photo-gallery div a:hover .overlay {
display: block;
}
最佳答案
.photo-gallery a {position: relative}
.photo-gallery a:after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transition: background-color 0.4s;
}
.photo-gallery a:hover:after {
background-color: rgba(0, 0, 0, 0.6);
}
关于html - CSS 图像叠加不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41251107/