实现效果如下：
观察发现鼠标放上去的时候出现了三个变化，渐变背景，文字位移和图片放大。
渐变背景：background-image: linear-gradient(transparent,rgba(0, 0, 0, .6)); // 从transparent白色到0.6透明度的黑色。默认情况下背景遮罩不显示(opacity:0)，hover的时候定位到盒子上(opacity:1)
文字位移：transform:translate(0,80px) // 水平位置保持不变，垂直方向隐藏”查看更多“这几个字。当鼠标hover的时候进行还原 transform: translate(0, 0);
图片放大：当鼠标hover的时候 transform:scale(1.1) 实现放大
整体代码如下：
1 <div class="box">
2 <img src="../images/product.jpeg" alt="">
3 <div class="dis">
4 <p>OceanStor Pacific 海量存储斩获2021 Interop金奖</p>
5 <p>查看更多</p>
6 </div>
7 <div class="mask"></div>
8 </div>
1 <style>
2 .box {
3 position: relative;
4 width: 768px;
5 height: 542px;
6 overflow: hidden;
7 }
8
9 .box .dis {
10 position: absolute;
11 left: 10px;
12 bottom: 10px;
13 font-size: 26px;
14 color: #fff;
15 transform: translate(0, 80px);
16 z-index: 1;
17
18 transition: all .5s;
19 }
20
21 .box:hover .dis {
22 transform: translate(0, 0);
23 }
24
25 .box img {
26 transition: all .5s;
27 }
28
29 .box:hover img {
30 transform: scale(1.1);
31 }
32
33 .mask {
34 position: absolute;
35 top: 0;
36 left: 0;
37 width: 768px;
38 height: 542px;
39 opacity: 0;
40 background-image: linear-gradient(transparent,
41 rgba(0, 0, 0, .6));
42 transition: all .2s;
43 }
44
45 .box:hover .mask {
46 opacity: 1;
47 }
48 </style>
注意要让文字保持在最前面(z-index:1)，否则加上背景遮罩会影响文字的显示效果
