[分享]css3悬浮上去隐藏图片

CSS3可以实现许多有趣的效果，其中之一就是悬浮上去隐藏图片。这种效果一般常用于商品展示或图片墙中，当鼠标悬浮在图片上时，会出现一层遮罩，遮住原图，显示另一张图片或文字，增加了用户的体验感。.hove...

CSS3可以实现许多有趣的效果，其中之一就是悬浮上去隐藏图片。这种效果一般常用于商品展示或图片墙中，当鼠标悬浮在图片上时，会出现一层遮罩，遮住原图，显示另一张图片或文字，增加了用户的体验感。

.hover-img{
    position: relative;
    display: inline-block;
}
.hover-img:hover .cover{
    display: block;
}
.cover{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    display: none;
}
.cover span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 2;
    font-size: 14px;
    color: #fff;
    text-align: center;
} 

在上述代码中，我们首先给需要悬浮隐藏的图片的父级元素设置一个相对定位，然后创建一个遮罩层，并设置它的位置为绝对定位，宽高与父级元素相等。同时我们将遮罩层的背景颜色设置为半透明黑色，并设置一个display:none属性值，表示一开始该层是隐藏的。

接着，我们在遮罩层中添加一个文字层或者图片层，用来代替原图，此处我们设置了一个span标签，并在其中设置了样式属性，位置为居中。我们再将这个span标签的z-index值设置大于遮罩层的值，以避免被遮罩层遮住。

最后是关键部分，我们给图片的父级元素添加一个:hover的伪类选择器，并在其中设置.cover选择器的display属性，当鼠标悬浮在图片上时，遮罩层会出现，显示出我们所设置的文字或图片。

以上的代码只是一个基本的模板，可以根据具体需求进行调整。值得注意的是，上述效果在IE8以下的浏览器是无法实现的，需要做兼容处理。