css3实现图片遮罩效果鼠标hover以后出现文字

实现图片遮罩效果并在鼠标hover时出现文字可以通过CSS3的伪元素和hover伪类实现。下面是具体步骤：

步骤一：HTML代码

首先，需要在HTML中添加一张图片和对应的文字。例如：

<div class="image-box">
  <img src="img/pic1.jpg">
  <div class="text">这里是图片标题</div>
</div>

步骤二：CSS代码

接下来，需要使用CSS对图片进行样式设置。

1.设置外框样式

为图片外框设置样式，包括宽度、高度、边框等。

.image-box {
  position: relative; /*相对定位*/
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
}

2.设置图片样式

为图片设置样式，包括宽度、高度、定位等。

.image-box img {
  display: block;
  width: 100%;
  height: 100%;
}

3.设置文字样式

为文字设置样式，包括颜色、字体等。

.image-box .text {
  position: absolute; /*绝对定位*/
  top: 50%; /*文字顶部与图片中心对齐*/
  left: 50%; /*文字左侧与图片中心对齐*/
  transform: translate(-50%, -50%); /*使文字居中*/
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  opacity: 0;
}

4.遮罩层样式

在hover时出现的遮罩层需要使用CSS的伪元素after来实现。

.image-box::after {
  content: ''; /*必须有*/
  position: absolute; /*绝对定位*/
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5); /*设置背景颜色*/
  opacity: 0; /*遮罩层默认隐藏*/
  transition: all 0.3s; /*过渡效果*/
}

5.绑定hover事件

为了实现鼠标hover遮罩层与文字的出现，需要使用CSS的hover伪类。

.image-box:hover::after {
  opacity: 1;
}

.image-box:hover .text {
  opacity: 1;
}

示例展示

下面是两个具体的实现示例：

示例1：遮罩层从底部滑入

.image-box::after {
  content: '';
  position: absolute;
  bottom: 0; /*遮罩层从底部开始*/
  left: 0;
  width: 100%;
  height: 0; /*遮罩层默认隐藏*/
  background: rgba(0,0,0,0.5);
  transition: all 0.3s;
}

.image-box:hover::after {
  height: 100%; /*遮罩层向上展开*/
}

.image-box .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  opacity: 0;
}

.image-box:hover .text {
  opacity: 1;
}

示例2：遮罩层从中间向四周展开

.image-box::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0; /*遮罩层默认隐藏*/
  height: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  transition: all 0.3s;
}

.image-box:hover::after {
  width: 100%; /*遮罩层向四周展开*/
  height: 100%;
}

.image-box .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  opacity: 0;
}

.image-box:hover .text {
  opacity: 1;
}

以上是使用CSS3实现图片遮罩效果鼠标hover以后出现文字的完整攻略，希望对你有所帮助。