CSS3-background-image漸變

實現效果如下：

觀察發現鼠標放上去的時候出現了三個變化，漸變背景，文字位移和圖片放大。

漸變背景：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) 實現放大

整體代碼如下：

    <div class="box">
        <img src="../images/product.jpeg" alt="">
        <div class="dis">
            <p>OceanStor Pacific 海量存儲斬獲2021 Interop金獎</p>
            <p>查看更多</p>
        </div>
        <div class="mask"></div>
    </div>

<style>
    .box {
        position: relative;
        width: 768px;
        height: 542px;
        overflow: hidden;
    }

    .box .dis {
        position: absolute;
        left: 10px;
        bottom: 10px;
        font-size: 26px;
        color: #fff;
        transform: translate(0, 80px);
        z-index: 1;

        transition: all .5s;
    }

    .box:hover .dis {
        transform: translate(0, 0);
    }

    .box img {
        transition: all .5s;
    }

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

    .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 768px;
        height: 542px;
        opacity: 0;
        background-image: linear-gradient(transparent,
                rgba(0, 0, 0, .6));
        transition: all .2s;
    }

    .box:hover .mask {
        opacity: 1;
    }
</style>

注意要讓文字保持在最前面(z-index:1)，否則加上背景遮罩會影響文字的顯示效果