我使用以下代码在将鼠标悬停在图像上时显示带有半透明红色覆盖层的标题:
HTML:
<a href="http://www.domain.com/">
<div class="thumb">
<img src="http://www.domain.com/thumbnail.jpg" width="100" height="100" alt="" />
<div>
<span>Caption</span>
</div>
</div>
</a>
CSS:
.thumb {
position: relative;
}
.thumb div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fe0000;
color: #fff;
opacity: 0;
transition: opacity 0.5s;
}
.thumb img {
display: block;
}
.thumb div span {
display: block;
position: absolute;
bottom: 10px;
left: 10px;
font-size: 30px;
}
.thumb:hover div {
opacity: 0.3;
}
此代码的问题在于标题也是半透明的。我想知道如何更改它以使标题不透明。
任何想法将不胜感激
最佳答案
关于html - 将鼠标悬停在图像上时显示带有半透明颜色叠加层的标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24600487/