herooverlaygradientfeaturedmodern

Featured Image with Overlay

Компонент Featured Image: изображение с градиентным оверлеем и текстом по центру. Идеально для баннеров, блоков с CTA или выделенного контента.

Live Preview

Prompt

<div class="relative w-full h-96 overflow-hidden rounded-2xl shadow-lg bg-gray-900">
  <img src="https://cdn.shopify.com/s/files/1/0908/9489/3329/files/22.jpg?v=1752730002" alt="Featured" class="w-full h-full object-cover opacity-80" loading="lazy" />
  <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
  <div class="absolute inset-0 flex items-center justify-center">
    <div class="text-center text-white px-4">
      <h2 class="text-4xl font-bold mb-2">Featured Content</h2>
      <p class="text-lg">Discover amazing products</p>
    </div>
  </div>
</div>

All Prompts