Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
CSS Hover Effects Collection
A collection of production-ready hover effects you can use immediately - button effects, image overlays, underline animations, icon effects, and card interactions. These patterns are used on professional websites worldwide.
Hover Effect Patterns
- Button lift - translateY(-2px) + box-shadow on hover. The most common button effect
- Image zoom - scale(1.1) on the image inside an overflow: hidden container
- Underline grow - ::after pseudo-element with width: 0 → 100% on hover
- Background slide - Background-position or gradient animation on hover
- Icon rotate - Icon rotates 360° or bounces on link hover
- Card tilt - Subtle 3D rotation (rotateX/Y) on card hover with perspective
- Glow effect - Colored box-shadow that increases on hover
Hover Effects Code
/* 1. Button with lift + glow */
.btn-hover {
transition: all 0.3s ease;
}
.btn-hover:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
/* 2. Image zoom in container */
.img-container {
overflow: hidden;
border-radius: 12px;
}
.img-container img {
transition: transform 0.4s ease;
}
.img-container:hover img {
transform: scale(1.08);
}
/* 3. Growing underline */
.link-underline {
position: relative;
}
.link-underline::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: #E44D26;
transition: width 0.3s ease;
}
.link-underline:hover::after { width: 100%; }
/* 4. Background fill from left */
.btn-fill {
position: relative;
overflow: hidden;
z-index: 1;
}
.btn-fill::before {
content: '';
position: absolute;
inset: 0;
background: #E44D26;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
z-index: -1;
}
.btn-fill:hover::before { transform: scaleX(1); }Tip
The 'background fill from left' button effect (::before with scaleX: 0 → 1) is one of the most impressive pure-CSS interactions. It works by absolutely positioning a pseudo-element as the background and scaling it on hover. Use transform-origin: left to make it slide in from the left edge.
Transitions for state changes, @keyframes for complex multi-step animations
Common Mistake
Using transition: all 0.3s for hover effects. 'all' is a performance trap - it animates EVERY property that changes, including ones you didn't intend like color inherited from a parent. Always name the specific properties: transition: transform 0.3s ease, box-shadow 0.3s ease.
Practice Task
Build a button collection with 4 different hover effects: (1) lift + glow (translateY + box-shadow), (2) growing underline (::after width 0→100%), (3) background fill from left (::before scaleX 0→1), (4) icon that slides in from the right on hover. Each button should use transform and opacity only - no layout properties.
Quick Quiz
Key Takeaways
- A collection of production-ready hover effects you can use immediately - button effects, image overlays, underline animations, icon effects, and card interactions.
- Button lift - translateY(-2px) + box-shadow on hover. The most common button effect
- Image zoom - scale(1.1) on the image inside an overflow: hidden container
- Underline grow - ::after pseudo-element with width: 0 → 100% on hover