CSS Hover Effects

Master CSS hover effects to create interactive, engaging user experiences with transitions, transforms, and creative animations.

The :hover pseudo-class applies styles when a user hovers over an element. It's essential for creating interactive, responsive interfaces.

Basic Hover

.button {
  background-color: #007bff;
  color: white;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #0056b3;
}

Common Hover Effects

Color Change

.link {
  color: #333;
  transition: color 0.3s ease;
}

.link:hover {
  color: #007bff;
}

Background Change

.card {
  background-color: white;
  transition: background-color 0.3s ease;
}

.card:hover {
  background-color: #f8f9fa;
}

Scale Transform

.image {
  transition: transform 0.3s ease;
}

.image:hover {
  transform: scale(1.05);
}

Shadow on Hover

.card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

Lift Effect

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

Button Hover Effects

Gradient Shift

.gradient-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.gradient-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  transition: left 0.3s ease;
  z-index: -1;
}

.gradient-button:hover::before {
  left: 0;
}

Border Animation

.border-button {
  position: relative;
  padding: 12px 24px;
  background: transparent;
  color: #007bff;
  border: 2px solid #007bff;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.3s ease;
}

.border-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #007bff;
  transition: left 0.3s ease;
  z-index: -1;
}

.border-button:hover {
  color: white;
}

.border-button:hover::before {
  left: 0;
}

Glow Effect

.glow-button {
  background-color: #007bff;
  color: white;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.glow-button:hover {
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.6),
              0 0 40px rgba(0, 123, 255, 0.4);
}

Image Hover Effects

Zoom In

.image-container {
  overflow: hidden;
}

.image-container img {
  transition: transform 0.5s ease;
}

.image-container:hover img {
  transform: scale(1.1);
}

Grayscale to Color

img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

img:hover {
  filter: grayscale(0%);
}

Overlay Appear

.image-wrapper {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.image-wrapper:hover .overlay {
  opacity: 1;
}

Text Hover Effects

Underline Slide

.text-link {
  position: relative;
  text-decoration: none;
  color: #333;
}

.text-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #007bff;
  transition: width 0.3s ease;
}

.text-link:hover::after {
  width: 100%;
}

Color Wave

.wave-text {
  background: linear-gradient(90deg, #007bff, #0056b3, #007bff);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 0.5s ease;
}

.wave-text:hover {
  background-position: -100% 0;
}

Card Hover Effects

Flip Card

.flip-card {
  perspective: 1000px;
  width: 300px;
  height: 200px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

Slide Up Content

.slide-card {
  position: relative;
  overflow: hidden;
}

.slide-content {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  transition: bottom 0.3s ease;
}

.slide-card:hover .slide-content {
  bottom: 0;
}

Underline Expand

.nav-item {
  position: relative;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
}

.nav-item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: #007bff;
  transition: width 0.3s ease;
}

.nav-item:hover::before {
  width: 80%;
}

Background Slide

.nav-button {
  position: relative;
  padding: 10px 20px;
  background: transparent;
  color: #333;
  overflow: hidden;
  z-index: 1;
}

.nav-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: #007bff;
  transition: width 0.4s ease, height 0.4s ease;
  z-index: -1;
}

.nav-button:hover {
  color: white;
}

.nav-button:hover::before {
  width: 300px;
  height: 300px;
}

Icon Hover Effects

Rotate

.icon {
  transition: transform 0.3s ease;
}

.icon:hover {
  transform: rotate(360deg);
}

Bounce

.icon {
  transition: transform 0.3s ease;
}

.icon:hover {
  animation: bounce 0.5s;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

Shake

.icon:hover {
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

Advanced Hover Effects

Ripple Effect

.ripple-button {
  position: relative;
  overflow: hidden;
}

.ripple-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.ripple-button:hover::after {
  width: 300px;
  height: 300px;
}

3D Tilt

.tilt-card {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

.tilt-card:hover {
  transform: rotateX(5deg) rotateY(5deg);
}

Performance Tips

Performance

Use transform and opacity for animations (GPU-accelerated)
Avoid animating width, height, top, left
Use will-change sparingly for complex animations
Keep transitions under 300-400ms
Test on lower-end devices

Accessibility

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

/* Ensure hover effects work with focus */
.button:hover,
.button:focus {
  background-color: #0056b3;
}

Best Practices

Hover Best Practices

Always use transitions for smooth effects
Keep hover effects subtle and purposeful
Ensure hover states work with focus states
Test on touch devices (no hover)
Don't rely on hover for critical functionality
Use :focus-visible for keyboard navigation
Keep animations under 400ms
Respect prefers-reduced-motion
Test with different mouse speeds
Ensure sufficient contrast in hover states

Touch Devices

/* Detect hover capability */
@media (hover: hover) {
  .button:hover {
    background-color: #0056b3;
  }
}

/* Touch-friendly alternative */
@media (hover: none) {
  .button:active {
    background-color: #0056b3;
  }
}

Master hover effects to create engaging, interactive interfaces that delight users!

The :hover pseudo-class applies styles when a user hovers over an element. It's essential for creating interactive, responsive interfaces.

Basic Hover

.button {
  background-color: #007bff;
  color: white;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #0056b3;
}

Common Hover Effects

Color Change

.link {
  color: #333;
  transition: color 0.3s ease;
}

.link:hover {
  color: #007bff;
}

Background Change

.card {
  background-color: white;
  transition: background-color 0.3s ease;
}

.card:hover {
  background-color: #f8f9fa;
}

Scale Transform

.image {
  transition: transform 0.3s ease;
}

.image:hover {
  transform: scale(1.05);
}

Shadow on Hover

.card {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

Lift Effect

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

Button Hover Effects

Gradient Shift

.gradient-button {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.gradient-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  transition: left 0.3s ease;
  z-index: -1;
}

.gradient-button:hover::before {
  left: 0;
}

Border Animation

.border-button {
  position: relative;
  padding: 12px 24px;
  background: transparent;
  color: #007bff;
  border: 2px solid #007bff;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.3s ease;
}

.border-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #007bff;
  transition: left 0.3s ease;
  z-index: -1;
}

.border-button:hover {
  color: white;
}

.border-button:hover::before {
  left: 0;
}

Glow Effect

.glow-button {
  background-color: #007bff;
  color: white;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.glow-button:hover {
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.6),
              0 0 40px rgba(0, 123, 255, 0.4);
}

Image Hover Effects

Zoom In

.image-container {
  overflow: hidden;
}

.image-container img {
  transition: transform 0.5s ease;
}

.image-container:hover img {
  transform: scale(1.1);
}

Grayscale to Color

img {
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

img:hover {
  filter: grayscale(0%);
}

Overlay Appear

.image-wrapper {
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.image-wrapper:hover .overlay {
  opacity: 1;
}

Text Hover Effects

Underline Slide

.text-link {
  position: relative;
  text-decoration: none;
  color: #333;
}

.text-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #007bff;
  transition: width 0.3s ease;
}

.text-link:hover::after {
  width: 100%;
}

Color Wave

.wave-text {
  background: linear-gradient(90deg, #007bff, #0056b3, #007bff);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 0.5s ease;
}

.wave-text:hover {
  background-position: -100% 0;
}

Card Hover Effects

Flip Card

.flip-card {
  perspective: 1000px;
  width: 300px;
  height: 200px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
}

Slide Up Content

.slide-card {
  position: relative;
  overflow: hidden;
}

.slide-content {
  position: absolute;
  bottom: -100%;
  left: 0;
  width: 100%;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  transition: bottom 0.3s ease;
}

.slide-card:hover .slide-content {
  bottom: 0;
}

Underline Expand

.nav-item {
  position: relative;
  padding: 10px 20px;
  text-decoration: none;
  color: #333;
}

.nav-item::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: #007bff;
  transition: width 0.3s ease;
}

.nav-item:hover::before {
  width: 80%;
}

Background Slide

.nav-button {
  position: relative;
  padding: 10px 20px;
  background: transparent;
  color: #333;
  overflow: hidden;
  z-index: 1;
}

.nav-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: #007bff;
  transition: width 0.4s ease, height 0.4s ease;
  z-index: -1;
}

.nav-button:hover {
  color: white;
}

.nav-button:hover::before {
  width: 300px;
  height: 300px;
}

Icon Hover Effects

Rotate

.icon {
  transition: transform 0.3s ease;
}

.icon:hover {
  transform: rotate(360deg);
}

Bounce

.icon {
  transition: transform 0.3s ease;
}

.icon:hover {
  animation: bounce 0.5s;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

Shake

.icon:hover {
  animation: shake 0.5s;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

Advanced Hover Effects

Ripple Effect

.ripple-button {
  position: relative;
  overflow: hidden;
}

.ripple-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.ripple-button:hover::after {
  width: 300px;
  height: 300px;
}

3D Tilt

.tilt-card {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

.tilt-card:hover {
  transform: rotateX(5deg) rotateY(5deg);
}

Performance Tips

Performance

Use transform and opacity for animations (GPU-accelerated)
Avoid animating width, height, top, left
Use will-change sparingly for complex animations
Keep transitions under 300-400ms
Test on lower-end devices

Accessibility

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}

/* Ensure hover effects work with focus */
.button:hover,
.button:focus {
  background-color: #0056b3;
}

Best Practices

Hover Best Practices

Always use transitions for smooth effects
Keep hover effects subtle and purposeful
Ensure hover states work with focus states
Test on touch devices (no hover)
Don't rely on hover for critical functionality
Use :focus-visible for keyboard navigation
Keep animations under 400ms
Respect prefers-reduced-motion
Test with different mouse speeds
Ensure sufficient contrast in hover states

Touch Devices

/* Detect hover capability */
@media (hover: hover) {
  .button:hover {
    background-color: #0056b3;
  }
}

/* Touch-friendly alternative */
@media (hover: none) {
  .button:active {
    background-color: #0056b3;
  }
}

Master hover effects to create engaging, interactive interfaces that delight users!

CSS Hover Effects

On this page

CSS Hover Effects

On this page