Introduction to hover effects
Hover effects are the cornerstone of micro-interactions in web design. They transform a static interface into a dynamic and engaging experience, guiding the user and providing immediate visual feedback.
In this comprehensive guide, we will explore 8 categories of hover effects with dozens of variations. Each effect is accompanied by an interactive demo and the complete CSS code that you can copy and adapt to your projects.
UX studies show that micro-interactions increase user engagement by 30% and reduce navigation errors. A good hover effect clearly indicates that an element is interactive.
Scale and Transform
CSS transformations are the foundation of many hover effects. They allow modifying the size, position and rotation of an element without affecting the page layout.
Scale effects
Scale is the simplest effect but also one of the most effective. It enlarges or reduces the element on hover.
/* Scale Up - Enlargement */
.scale-up {
transition: transform 0.3s ease;
}
.scale-up:hover {
transform: scale(1.1);
}
/* Scale Down - Reduction */
.scale-down:hover {
transform: scale(0.95);
}
/* Lift - Elevation with shadow */
.lift:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(99, 102, 241, 0.4);
}
/* Rotate - Rotation legere */
.rotate:hover {
transform: rotate(5deg) scale(1.05);
}Key points
- Transform does not affect the layout: neighboring elements do not move
- Use ease or ease-out for natural transitions
- Combine multiple transforms: scale + translate + rotate
- 300ms is the ideal duration for most effects
Animated underline
Animated underlines are perfect for navigation links. They replace classic underlined text with elegant and modern animations.
/* Underline Slide - From left to right */
.underline-slide {
position: relative;
}
.underline-slide::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
transition: width 0.3s ease;
}
.underline-slide:hover::after {
width: 100%;
}
/* Underline Center - From center */
.underline-center::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
background: #6366f1;
transform: translateX(-50%);
transition: width 0.3s ease;
}
.underline-center:hover::after {
width: 100%;
}
/* Pass Through - Passes through element */
.underline-out {
overflow: hidden;
}
.underline-out::after {
content: '';
position: absolute;
bottom: 0;
left: -100%;
width: 100%;
height: 3px;
background: #8b5cf6;
transition: left 0.5s ease;
}
.underline-out:hover::after {
left: 100%;
}Overlay reveal
Reveal effects reveal a background or overlay on hover. They are perfect for buttons, cards and CTA elements.
/* Horizontal Reveal with scaleX */
.reveal-bg {
position: relative;
overflow: hidden;
z-index: 1;
}
.reveal-bg::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, #6366f1, #8b5cf6);
z-index: -1;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.4s ease;
}
.reveal-bg:hover::before {
transform: scaleX(1);
transform-origin: left;
}
/* Circle Expand from center */
.reveal-circle::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: #6366f1;
border-radius: 50%;
z-index: -1;
transform: translate(-50%, -50%);
transition: all 0.5s ease;
}
.reveal-circle:hover::before {
width: 300%;
height: 300%;
}Use transform-origin to control the animation's starting point. Combine with scaleX or scaleY for directional effects.
Shine and Sweep effect
Shine effects add a luminous reflection that crosses the element. Perfect for premium buttons and product cards.
/* Shine Sweep - Reflection that sweeps across */
.shine-sweep {
position: relative;
overflow: hidden;
}
.shine-sweep::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
transparent,
rgba(255, 255, 255, 0.1),
transparent
);
transform: rotate(45deg) translateX(-100%);
transition: transform 0.6s ease;
}
.shine-sweep:hover::after {
transform: rotate(45deg) translateX(100%);
}
/* Glow Effect - External glow */
.shine-glow:hover {
box-shadow:
0 0 20px rgba(99, 102, 241, 0.5),
0 0 40px rgba(139, 92, 246, 0.3),
0 0 60px rgba(99, 102, 241, 0.1);
}
/* Pulse Glow - Pulsation lumineuse */
.shine-pulse:hover {
animation: pulseGlow 1s ease-in-out infinite;
}
@keyframes pulseGlow {
0%, 100% {
box-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
}
50% {
box-shadow: 0 0 30px rgba(99, 102, 241, 0.6);
}
}3D Tilt on hover
3D effects use perspective and rotate3d to create a sense of depth. They are particularly effective on cards and images.
/* 3D Tilt - Inclinaison perspective */
.tilt-3d {
transition: transform 0.3s ease;
transform-style: preserve-3d;
}
.tilt-3d:hover {
transform: perspective(500px) rotateX(10deg) rotateY(-10deg);
}
/* Flip Card - Full rotation */
.tilt-flip {
transition: transform 0.6s ease;
transform-style: preserve-3d;
}
.tilt-flip:hover {
transform: perspective(500px) rotateY(180deg);
}
/* Depth Effect - Coming toward the user */
.tilt-depth {
transition: all 0.3s ease;
transform-style: preserve-3d;
}
.tilt-depth:hover {
transform: perspective(500px) translateZ(20px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}3D transformations can be resource-intensive. Use will-change: transform sparingly and avoid having too many simultaneous 3D elements on the page.
Color shift and Filters
CSS filters allow powerful color effects without modifying source images. They are perfect for galleries and portfolios.
/* Color Shift - Color change */
.color-shift {
transition: all 0.3s ease;
}
.color-shift:hover {
background: #6366f1;
color: white;
border-color: #6366f1;
}
/* Gradient Move - Moving gradient */
.gradient-shift {
background: linear-gradient(135deg, #6366f1, #8b5cf6);
background-size: 200% 200%;
background-position: 0% 50%;
transition: background-position 0.5s ease;
}
.gradient-shift:hover {
background-position: 100% 50%;
}
/* Filter Brightness */
.filter-brightness:hover {
filter: brightness(1.3);
}
/* Hue Rotate - Hue rotation */
.filter-hue:hover {
filter: hue-rotate(90deg);
}
/* Grayscale to color */
.filter-grayscale {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.filter-grayscale:hover {
filter: grayscale(0%);
}Image zoom with overflow hidden
The image zoom effect is a timeless classic. The technique relies on overflow: hidden on the container and transform: scale on the image.
/* Container with overflow hidden */
.image-container {
overflow: hidden;
border-radius: 12px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
/* Zoom in on hover */
.zoom-in:hover img {
transform: scale(1.2);
}
/* Zoom Out - Starts zoomed in */
.zoom-out img {
transform: scale(1.2);
}
.zoom-out:hover img {
transform: scale(1);
}
/* Zoom + Pan - Deplacement */
.zoom-pan:hover img {
transform: scale(1.3) translateX(10%);
}Best practices and performance
Hover effects are powerful but must be used judiciously. Here are the golden rules for performant and accessible animations.
Performance
- Prefer transform and opacity: these properties are GPU-optimized
- Avoid animating width, height, margin, padding: they trigger layout recalculations
- Use will-change sparingly: only on frequently animated elements
- Limit the number of simultaneous animations: 3-5 elements maximum
Accessibility
Respect user preferences for reduced motion:
/* Disable animations if user prefers */
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Alternative: minimal transitions */
@media (prefers-reduced-motion: reduce) {
.hover-effect {
transition: opacity 0.2s;
}
.hover-effect:hover {
opacity: 0.8;
}
}UX Guidelines
- Ideal duration: 200-400ms for most hover effects
- Consistency: use the same type of effect for similar elements
- Subtlety: the best effects are the ones you barely notice
- Clear feedback: the user must instantly understand that the element is interactive
transform, opacity, filter and box-shadow are the most performant properties for animations. They do not affect the layout and benefit from GPU acceleration.
Conclusion
Hover effects are an essential element of modern web design. By mastering the techniques presented in this guide - transformations, underlines, reveals, shine, 3D and filters - you have a complete toolkit to create engaging interfaces.
Remember the key principles:
- Prioritize transform and opacity for performance
- Respect accessibility with prefers-reduced-motion
- Keep effects subtle and consistent
- Test on different devices and browsers
Discover over 50 hover effects ready to use in our effects library, with one-click copyable code and real-time customization.