SOURCE

<div class="card-wrapper">

    <div class="card">

    <span> this is card</span>

</div>
<div class="card">

   <span> this is card</span>

</div>
<div class="card">

   <span> this is card</span>

</div>
</div>

/* 布局 */
.card-wrapper {
    display: flex;
}

.card {
    background: #fff;
    height: 50vh;
    width: 20vw;
    text-align: center;
    line-height: 50vh;
    cursor: pointer;
}
/* hover */
.card {
    position: relative;
    transition: all .3s ease-in-out;
    transform: translateY(0px);
    box-shadow: 0 0px 0px #ddd;
}

.card:hover {
    box-shadow: 0 10px 20px #ddd;
    z-index: 10;
    border-radius: 10px;
    transform: translateY(-6px);
}

.card * {
    display: block;
    transition: all .3s ease;
    transform: translateY(0px);
}

.card:hover * {
    transform: translateY(-16px);
}