Core Code
Core Code Modern Dev Handbook

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)

example Basic CSS Transition open example example Width Transition open example example Multiple Property Transition open example example Transform Transition open example example Transition Delay open example example Timing Function Ease open example example Timing Function Linear open example example Button Hover Transition open example