cardimage-overlayintermediate

Image Overlay Card

A card with a background image and a gradient overlay for readable text on top.

Preview

Mountain Vista

Explore breathtaking alpine landscapes.

<div class="relative rounded-2xl overflow-hidden max-w-sm h-80 group">
  <img src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=320&fit=crop" alt="Mountain" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
  <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent"></div>
  <div class="absolute bottom-0 left-0 right-0 p-6">
    <h3 class="text-xl font-bold text-white mb-1">Mountain Vista</h3>
    <p class="text-white/70 text-sm">Explore breathtaking alpine landscapes.</p>
  </div>
</div>