效果图:
1、将遮罩层html代码与图片放在一个div
我是放在 .proBK里。
<div class="proBK">
<img src="../../assets/image/taskPro.png" class="proImg">
<div class="imgText">
<h5>用户在线发布任务</h5>
</div>
</div>
2、为图片及遮罩层添加样式
图片:relative
遮罩层:absolute
使两者样式重合。
鼠标不在图片上时,遮罩层不显示 .imgText{ opacity: 0; } 。
.proBK {
width: 380px;
height: 260px;
margin-bottom: 20px;
position: relative;
}
.proImg {
width: 100%;
height: 100%;
}
.imgText{
position: absolute;
background: rgba(106, 64, 155, 0.8);
top: 0px;
left: 0px;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 0;
color: #ffffff;
text-align: center;
}
h5 {
padding-top: 103px;
font-size: 18px;
}
.proBK .imgText:hover {
opacity: 1;
}
3、使用hover
改变透明度,使遮罩层显示。
.proBK .imgText:hover {
opacity: 1;
}