我有一张简单的图片像这样:
<img src="/assets/missing.png">
现在我想要的是,当鼠标悬停在图像上时,出现一个透明的黑色覆盖层,并有一个大的“x”显示在上面。这是否仅使用CSS3就可以实现,还是需要JavaScript?如果需要,应该如何实现?
我已经试着让它起作用了,但是我有一个问题无法解决。以下是截图: 截图 如您所见,顶部有一部分缺失。以下是我的CSS:
.image {
padding: 0px;
display: inline-block;
vertical-align: middle;
max-height: 150px;
max-width: 150px;
margin: 15px;
position:relative;
}
.image img {
width:100%;
vertical-align:top;
}
.image:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.image:hover:after {
opacity:1;
}