hover lift shadow elevation card card hover elevation effect button lift on hover interactive depth feedback cards lack hover feedback need elevation effect without complex shadows want simple lift-and-shadow hover
Hover Lift
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/hover-lift.json
Hover lift
Card emphasis
Raises slightly to signal clickability.
The motion adds hierarchy without becoming flashy.
Background
Customize
Quick Start
<div class="hover-lift rounded-xl bg-white/10 p-6">Hover me</div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 453 bytes · 19 lines
- Custom Properties
-
--lift-distance--lift-shadow--lift-duration - Classes
-
.hover-lift
hover lift shadow elevation card
A clean hover effect that lifts the element up and adds a shadow, creating a sense of depth and interactivity. Uses translateY and box-shadow with a spring-like easing.
Card grid with hover lift
<div class="grid grid-cols-3 gap-4">
<div class="hover-lift rounded-xl bg-white/10 border border-white/15 p-6 text-white cursor-pointer">
<h3 class="font-semibold">Card One</h3>
<p class="mt-1 text-sm text-white/60">Hover to lift</p>
</div>
<div class="hover-lift rounded-xl bg-white/10 border border-white/15 p-6 text-white cursor-pointer">
<h3 class="font-semibold">Card Two</h3>
<p class="mt-1 text-sm text-white/60">Hover to lift</p>
</div>
<div class="hover-lift rounded-xl bg-white/10 border border-white/15 p-6 text-white cursor-pointer">
<h3 class="font-semibold">Card Three</h3>
<p class="mt-1 text-sm text-white/60">Hover to lift</p>
</div>
</div>