效果

华为官网有这样一种效果，感觉还是挺常见的，自己试着实现了一下

遮罩.gif

思路分析

效果分析

仔细查看，鼠标悬停时，页面的效果：

盒子出现透明色遮罩
图片有缩放的效果
文字框有上升的效果

代码分析

html结构

    <div class="box"><img src="./images/product.jpg" alt="">
            <div class="info">
                <p>前沿探索/p>
                    <h4>憧憬6G，共同定义6G</h4>
                    <p>《6G无线通信新征程》序言</p>
                    <p class="more">了解更多 </p>
            </div>

基础css样式

 .box {
             width: 446px;
             height: 314px;
             overflow: hidden;
         }
 
         .box img {
             width: 100%;
             height: 100%;
         }

hover图片放大效果简单的hover后给图片加一个scale的值让图片放大，并在img上加上过渡

 .box:hover img {
             transform: scale(1.1);
         }

盒子遮罩效果应用伪元素和子绝父相让遮罩覆盖box盒子

 .box {
             position: relative;
             }
 .box::after {
             content: '';
             position: absolute;
             left: 0;
             top: 0;
             width: 100%;
             height: 100%;
             background-image: linear-gradient(transparent, rgba(0, 0, 0, .5));
             opacity: 0;
         }
 .box:hover::after {
             opacity: 1;
         }

文字上升效果先用定位，设置bottom为负值，让下面的链接文字超出盒子，再给box盒子设置"overflow:hidden;",然后hover后上升就行，记得加上过渡让过程更加平滑

 .info {
             position: absolute;
             width: 100%;
             height: auto;
             bottom: -50px;
             padding: 25px 30px;
             z-index: 999;
             font-size: 18px;
             color: #fff;
             transition: all .5s;
         }
         .box:hover .info {
             transform: translateY(-50px);
         }
         .info h4 {
             font-size: 24px;
             margin: 5px 0;
         }
         .info .more {
             margin-top: 15px;
         }
         .icon-arrow-right {
             color: red;
         }

有多个绝对定位的盒子，按照html的书写顺序来，写在下面的层级越高在上面，可以通过设置z-index的值来提升层级

这里是因为遮罩用了after伪元素，默认在box盒子的最后面，所以会压住info和img，所以想让info压在遮罩上面，需要设置z-index值

完整代码

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
         .box {
             position: relative;
             float: left;
             margin-right: 10px;
             width: 446px;
             height: 314px;
             overflow: hidden;
         }
         .box img {
             width: 446px;
             height: 314px;
             transition: all .5s;
         }
         .box:hover img {
             transform: scale(1.1);
         }
         /* 遮罩 */
         .box::after {
             content: '';
             position: absolute;
             left: 0;
             top: 0;
             width: 100%;
             height: 100%;
             background-image: linear-gradient(transparent, rgba(0, 0, 0, .5));
             opacity: 0;
         }
         .box:hover::after {
             opacity: 1;
         }
         .info {
             position: absolute;
             width: 100%;
             height: auto;
             bottom: -50px;
             padding: 25px 30px;
             z-index: 999;
             font-size: 18px;
             color: #fff;
             transition: all .5s;
         }
         .box:hover .info {
             transform: translateY(-50px);
         }
         .info h4 {
             font-size: 24px;
             margin: 5px 0;
         }
         .info .more {
             margin-top: 15px;
         }
     </style>
 </head>
 
 <body>
     <div class="box"><img src="./课堂素材/images/product.jpg" alt="">
         <div class="info">
             <p>前沿探索/p>
                 <h4>憧憬6G，共同定义6G</h4>
                 <p>《6G无线通信新征程》序言</p>
                 <p class="more">了解更多</p>
         </div>
     </div>
 </body>
 </html>

用CSS实现鼠标悬停出现遮罩并且文字上升

效果

思路分析

效果分析

代码分析

完整代码