:覆盖前没有掩盖图像时掩藏在
问题描述:
因此,我想要的是,当图像悬停在黑色覆盖层上时,我添加了:覆盖div之前,然后我将添加文本和图像后面的顶部。使用当前的代码,它甚至不会识别悬停。我也在使用基础。帮助会非常赞赏:):覆盖前没有掩盖图像时掩藏在
<div class="small-12 large-4 columns">
<img class="tri" src="media/images/mountain.jpg">
</div>
.tri{
position: relative;
overflow: hidden;
display: block;
}
.tri:before{
opacity: 0.8%;
top: 100%;
width: 100%;
height: 100%;
transition: all 0.4s;
background-color: black;
position: absolute;
content: '';
}
.tri:hover::before{
top: 0%;
}
答
不幸的是,::before
和::after
psuedoclasses不支持自闭的元素,如img
和input
。
您可以简单地在img
周围换一个div
,并将:hover
和::before
属性放在上面。
嗨乔恩,添加到它周围的div,它的工作完美。谢谢 :) –