Bootstrap 5 card hover effects add visual interactivity without JavaScript. This page covers 4 hover patterns — lift, border color, image zoom and overlay reveal — each using pure CSS transitions.
Key Classes Reference
| CSS Property | What It Does |
|---|---|
transition | Smooth animation between states |
transform: translateY(-6px) | Lift effect on hover |
transform: scale(1.08) | Image zoom on hover |
overflow: hidden | Clips zoomed image to card |
opacity: 0 → 1 | Fade in overlay |
box-shadow | Shadow on hover |
1. Bootstrap 5 Card Lift Hover Effect
Cards lift up with a shadow on hover using CSS transform and transition.
2. Bootstrap 5 Card Border Color Hover
Card border changes color on hover. Clean and subtle — works well for feature cards.
3. Bootstrap 5 Card Image Zoom on Hover
The card image zooms in smoothly on hover while the card itself stays still.
4. Bootstrap 5 Card Overlay Reveal on Hover
A dark overlay with action buttons appears on card hover. Common for portfolio and gallery cards.
Frequently Asked Questions
Bootstrap 5 doesn't include built-in card hover effects. Add custom CSS transitions: .card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }. Apply to specific cards with a custom class.
Add overflow-hidden to the card and a CSS transition on the card image: .card { overflow: hidden; } .card img { transition: transform 0.4s ease; } .card:hover img { transform: scale(1.08); }. The overflow-hidden clips the zoomed image to the card boundaries.
Position the overlay div absolute with inset:0 inside a position-relative card. Set opacity:0 by default and opacity:1 on hover with a CSS transition. Add a semi-transparent background and flex layout for centered content.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.