CSS 响应式卡片

想实现的效果

最开始是看到了华为网站的这个卡片效果，想复刻一下。

效果细分

1. 在普通状态下，为了让白字显示更清楚，图片前有一个渐变阴影的蒙版。
2. 鼠标移入后，渐变阴影加深，图片放大，下方文字浮出。
3. 鼠标移到了解更多时，箭头向右移动

代码实现 

HTML

<div class="card">
    <img src="../assets/img/hongkong.jpeg"/>
    <!--mask用于添加阴影-->
    <div class="mask"></div>
    <div class="caption">
        <h3 class="text"> 旅游 </h3>
        <h2 class="text"> 香港的景色</h2>
        <p class="text2"> 了解更多 </p>
    </div>  
</div>

CSS 

.card{
    width: 450px;
    background-size: cover;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}
img{
    display: block; /*删除此行，父盒子高度会出现超出*/
    width: 100%;
    transition: all 0.5s;
}
.caption{
    width:100%;
    position: absolute;
    bottom: -26px;
    margin: 0px;
    transition: all 0.5s;
}

/*鼠标移入，图片放大*/
.card:hover img{
    transform: scale(1.1);
}
/*鼠标移入，文字上升*/
.card:hover .caption{
    transform: translateY(-40px);
}

.mask{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
}

/*鼠标移入，渐变阴影加深*/
.card:hover .mask{
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
}

.text{
    color: rgba(255,255,255);
    padding: 0px 0px 5px 16px;
    margin: 0px;
    user-select: none;
}
.text2{
    color: rgba(255,255,255);
    padding: 5px 0px 10px 16px;
    margin: 0px;
    user-select: none;
}

.text2::after{
    content: ">";
    color:rgb(158, 218, 255);
    font-size: large;
    font-weight: bolder;
    transition: 0.5s;
}

/*鼠标移入，箭头右移*/
.text2:hover::after{
    padding-left: 5px;
} 

最终效果