[分享]css3悬停遮罩显示文字

CSS3悬停遮罩显示文字是一种在悬停元素时显示遮罩效果，并在遮罩上显示相关文字的效果。这种效果可以用于网站的各种元素，如图片、按钮等。下面是一个示例代码。 这是图片的说明文字。 .box { ...

CSS3悬停遮罩显示文字是一种在悬停元素时显示遮罩效果，并在遮罩上显示相关文字的效果。这种效果可以用于网站的各种元素，如图片、按钮等。下面是一个示例代码。

<div class="box">
    <img src="image.jpg">
    <div class="overlay">
        <p>这是图片的说明文字。</p>
    </div>
</div>
.box {
    position: relative;
}
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    transition: all 0.5s ease;
}
.box:hover .overlay {
    opacity: 1;
} 

在示例代码中，我们首先定义了一个包含图片和遮罩层的父元素。父元素设置为相对定位，遮罩层设置为绝对定位，并将其覆盖在图片上。并且设置遮罩层的透明度为0，表示一开始不可见。

然后我们使用CSS3的过渡效果，在悬停时改变遮罩层的透明度，使其变为可见状态。在遮罩层中，我们可以加入文字描述图片的内容。

此外，我们还可以通过修改遮罩层的背景色和文本颜色，来实现更加个性化的效果。代码中的过渡时间和缓动效果都可以根据具体需求进行调整。