Card Hover Lift

Card components often use transitions with box-shadow.

Preview

Code

<style>
.card{
width:180px;
padding:20px;
background:white;
box-shadow:0 2px 6px rgba(0,0,0,0.2);
transition:transform 0.3s, box-shadow 0.3s;
}

.card:hover{
transform:translateY(-5px);
box-shadow:0 10px 20px rgba(0,0,0,0.3);
}
</style>

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

More CSS Transitions Examples (8)