cardsbeginner

Hover Lift Card

Card that lifts up with enhanced shadow on hover for interactive feel.

Preview

Hover Me

This card lifts on hover

Tailwind Classes

bg-white rounded-xl shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300

CSS Code

.hover-lift {
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  transition: all 0.3s ease;
}
.hover-lift:hover {
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  transform: translateY(-4px);
}

HTML Example

<div class="bg-white rounded-xl shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 p-6">
  <h3 class="font-bold text-gray-900">Hover Me</h3>
  <p class="text-gray-600">This card lifts on hover</p>
</div>

Use Cases

Product cardsBlog postsTeam membersFeature lists

Browser Support

All modern browsers

#hover#animation#cards#interactive