实现效果如下：

观察发现鼠标放上去的时候出现了三个变化，渐变背景，文字位移和图片放大。

渐变背景：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)，否则加上背景遮罩会影响文字的显示效果