鼠标移动到图片上显示遮罩，并且显示一些文字
效果：
分析：
遮罩层主要是以半透明黑色背景为主，加上文字和四根修饰线条，这就是鼠标hover到图片上以后要显示的内容。
先将遮罩内容写好在HTML文件里面，然后根据图片效果来添加css样式就可以了，下面是代码，我再大致分析一下用到的属性
代码：
html：
<div class="box"><!-- 图片--><img src="./images/photo6.jpg" alt="" /><!-- 遮罩 --><div class="cover"><div class="vertical">灵巧吹风机</div><div class="across"></div></div>
</div>css：
/* 写好遮罩层样式,并且让它先不显示 */
.cover {top: 0px;width: 100%;height: 100%;text-align: center;position: absolute;background-color: rgba(0, 0, 0, 0.5);opacity: 0;
}/* 鼠标hover,显示遮罩,设置过渡时间 */
.cover:hover {transition: all 2s;width: 311px;height: 245px;opacity: 1;
}主要属性：
- opacity：这里遮罩层的隐藏和显示，主要是通过opacity属性，给div设置一个透明度来实现
opacity的值：
0.0（完全透明）~1.0（完全不透明）
opacity属性详细参见：https://www.runoob.com/cssref/css3-pr-opacity.html
- background-color：用来设置给遮罩半透明背景，rgba()函数，使用红绿蓝、以及透明度的叠加来生成各式各样的颜色。
background-color属性详细参见：CSS rgba()函数 https://www.runoob.com/cssref/func-rgba.html
- transition：给遮罩层设置过渡效果 。all:所有属性都将获得过渡效果，这里设置过渡效果持续时间为2s
transition属性详细参见：https://www.runoob.com/cssref/css3-pr-transition.html
参考：
https://blog.csdn.net/rocling/article/details/82858104
https://www.jb51.net/css/114990.html
