html程式碼部分：

      <div class="box">
        <ul>
            <li>
                <a href="#">
                
                    <img src="./images/product.jpeg" alt="">
                    <div class="product-info">
                        <h4>產品</h4>
                        <h5>OceanStor Pacific 海量存儲斬獲2021 Interop金獎</h5>
                        <p class="more">了解更多 <i class="iconfont icon-arrow-right"></i></p>
    
                    </div>
                    <div class="mask"></div>
                    
                </a>
           </li>

           <li>
            <a href="#">
            
                <img src="./images/huawei1.jpeg" alt="">
                <div class="product-info">
                    <h4>行業洞察</h4>
                    <h5>邁向智慧世界2030</h5>
                    <p class="more">了解更多 <i class="iconfont icon-arrow-right"></i></p>

                </div>
                <div class="mask"></div>
                
            </a>
       </li>

         <li>
            <a href="#">
        
                 <img src="./images/huawei2.jpeg" alt="">
                 <div class="product-info">
                    <h4>產品</h4>
                    <h5>OceanStor Pacific 海量存儲斬獲2021 Interop金獎</h5>
                    <p class="more">了解更多 <i class="iconfont icon-arrow-right"></i></p>

               </div>
              <div class="mask"></div>
            
            </a>
         </li>
      </ul>    
    
        
    </div>

CSS樣式部分
     /* 清除默認的margin和padding */
*{
    margin: 0;
    padding: 0;
}
/* 去除a標籤下劃線 */
a{
    text-decoration: none;
}
/* 去除li標籤圓點 */
li {
    list-style: none;
}
/* 設置版心，也就是最大的外面的盒子 */
.box{
    width: 1110px;
    height: 247px;
    /* background-color: pink; */
    margin: 0 auto;
}
/* 用按標籤設置盒子，並將其左浮動 */
.box li a{
    position: relative;
    float: left;
    width: 350px;
    height: 247px;
    /* background-color: skyblue; */
    margin-right: 30px;
    overflow: hidden;    /*超出盒子大小不顯示*/
}
.box li:last-child a {
    margin-right: 0;
}
.box img{
    transition: all .5s;
    width: 350px;
    /* height: 247px; */
}
/* 設置文字部分的樣式，並定位 */
.box .product-info{
    position: absolute;
    bottom: -50px;
    left: 0;
    /* margin: 0 auto; */
    width: 350px;
    height: 181px;
    /* background-color: orange; */
    padding: 20px 30px;
    box-sizing: border-box;
    z-index: 2;         /*提升顯示層疊，不然會受到漸變背景影響*/
    transition: all .5s;
}
.box .product-info h4{
    font-weight: inherit;
    font-size: 14px;
    height: 29px;
    color: #fff;
}
.box .product-info h5{
    height: 54px;
    font-weight: inherit;
    font-size: 18px;
    margin-bottom: 40px;
    color: #fff;
}
.box .product-info p{
    font-size: 14px;
    color: #fff;

}
.box .product-info .icon-arrow-right{
    display: inline-block;  /* 使用transform，不能是行內元素，否則無效*/
    
    transition: all .5s;
    
    color: red;
}
/* 設置漸變色，並定位 */
.box .mask{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 350px;
    height: 247px;
    background-image: linear-gradient(
        transparent,
        rgba(0,0,0,.6)
    );
    opacity: 0;
}

/* 設置hover */
.box a:hover .mask{
    opacity: 1;
}
.box a:hover img{
    transform: scale(1.2);
}
.box a:hover .product-info {
    transform: translateY(-50px);
}
.box  .more:hover .icon-arrow-right{
    
    transform: translateX(20px);
}