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