Card Shine Effect

Preview

Tailwind Classes

relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent hover:before:translate-x-full before:transition-transform before:duration-700

CSS Code

.card-shine {
  position: relative;
  overflow: hidden;
}
.card-shine::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: transform 0.7s;
}
.card-shine:hover::before {
  transform: translateX(100%);
}

HTML Example

<div class="relative overflow-hidden bg-gray-900 rounded-lg p-6 before:absolute before:inset-0 before:-translate-x-full before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent hover:before:translate-x-full before:transition-transform before:duration-700">
  <h3 class="text-white font-bold">Premium Card</h3>
  <p class="text-gray-400">Hover to see shine</p>
</div>

Use Cases

Browser Support

All modern browsers