A lift fade hover effect built with pure HTML and CSS that combines upward movement with subtle opacity transitions during interaction. It enhances hover depth and visual smoothness while maintaining structural stability.
Usage
Use this component when UI elements require combined motion and fade feedback, such as cards, buttons, product tiles, or interactive panels that benefit from layered interaction styling.
Implementation
The effect is achieved using transform translation for elevation paired with opacity and transition timing controls. CSS manages animation duration, easing, and responsiveness to ensure smooth and consistent behavior.
HTML
<div class="hover-lift">
Hover me
</div>CSS
.hover-lift {
width: 200px;
padding: 0.75rem 0;
border-radius: 14px;
background: #ffffff;
color: #111827;
font-size: 13px;
text-align: center;
box-shadow: 0 12px 24px rgba(0,0,0,0.12);
transition: transform 150ms ease, background 150ms ease;
}
.hover-lift:hover {
transform: translateY(-2px);
background: #eef2ff;
}
@media (prefers-color-scheme: dark) {
.hover-lift {
background: #020617;
color: #e5e7eb;
}
.hover-lift:hover {
background: #1e1b4b;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Combines lift and fade transitions
- Enhances interactive motion clarity
- Fully responsive and lightweight
- Suitable for cards, buttons, and panels
- Easy to customize lift height and fade intensity
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.