All Prompts
All Prompts
gallerydarkresponsivehorizontalscroll
Backstage Gallery Section with Horizontal Scroll
Секция галереи с горизонтальной прокруткой. Темная тема, полноэкранный режим, карточки с эффектами при наведении. Идеально для изображений из-за кулис.
Prompt
<div class="mb-32" id="backstage">
<style>.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}</style>
<div class="max-w-5xl mx-auto px-6 mb-8 flex items-end justify-between">
<div>
<h2 class="text-2xl font-semibold text-white tracking-tight mb-2">Backstage</h2>
<p class="text-sm text-neutral-500">Behind the scenes on recent productions.</p>
</div>
<div class="hidden sm:flex gap-2">
<div class="w-8 h-8 rounded-full border border-neutral-800 flex items-center justify-center text-neutral-500">
<iconify-icon icon="lucide:arrow-left" width="14" stroke-width="1.5"></iconify-icon>
</div>
<div class="w-8 h-8 rounded-full border border-neutral-800 flex items-center justify-center text-neutral-500">
<iconify-icon icon="lucide:arrow-right" width="14" stroke-width="1.5" class=""></iconify-icon>
</div>
</div>
</div>
<div class="overflow-x-auto snap-x snap-mandatory scrollbar-hide w-full pb-4">
<div class="flex gap-4 sm:mx-0 sm:px-[max(1.5rem,calc((100vw-64rem)/2))]
w-max mr-auto ml-auto pr-6 pl-6 gap-x-4 gap-y-4">
<div class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative
aspect-[4/3] rounded-lg overflow-hidden border
border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?q=80&w=1000&auto=format&fit=crop" alt="Backstage 1" class="w-full h-full object-cover opacity-60
group-hover:opacity-100 transition-opacity duration-500
grayscale group-hover:grayscale-0" />
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:clapperboard" width="12"></iconify-icon>
</span>
</div>
</div>
<div class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative
aspect-[4/3] rounded-lg overflow-hidden border
border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1598550476439-6847785fcea6?q=80&w=1000&auto=format&fit=crop" alt="Backstage 2" class="w-full h-full object-cover opacity-60
group-hover:opacity-100 transition-opacity duration-500
grayscale group-hover:grayscale-0" />
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:settings-2" width="12"></iconify-icon>
</span>
</div>
</div>
<div class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative
aspect-[4/3] rounded-lg overflow-hidden border
border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1522858547137-f1dcec554f55?q=80&w=1000&auto=format&fit=crop" alt="Backstage 3" class="w-full h-full object-cover opacity-60
group-hover:opacity-100 transition-opacity duration-500
grayscale group-hover:grayscale-0" />
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:mic" width="12"></iconify-icon>
</span>
</div>
</div>
<div class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative
aspect-[4/3] rounded-lg overflow-hidden border
border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1516035069371-29a1b244cc32?q=80&w=1000&auto=format&fit=crop" alt="Backstage 4" class="w-full h-full object-cover opacity-60
group-hover:opacity-100 transition-opacity duration-500
grayscale group-hover:grayscale-0" />
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:film" width="12"></iconify-icon>
</span>
</div>
</div>
<div class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative
aspect-[4/3] rounded-lg overflow-hidden border
border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1640906152676-dace6710d24b?w=2160&q=80" alt="Backstage 5" class="w-full h-full object-cover opacity-60
group-hover:opacity-100 transition-opacity duration-500
grayscale group-hover:grayscale-0" />
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:headphones" width="12"></iconify-icon>
</span>
</div>
</div>
<div class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative
aspect-[4/3] rounded-lg overflow-hidden border
border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1629946832022-c327f74956e0?w=2160&q=80" alt="Backstage 6" class="w-full h-full object-cover opacity-60
group-hover:opacity-100 transition-opacity duration-500
grayscale group-hover:grayscale-0" />
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:sliders" width="12"></iconify-icon>
</span>
</div>
</div>
<div class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative
aspect-[4/3] rounded-lg overflow-hidden border
border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1724525647065-f948fc102e68?w=2160&q=80" alt="Backstage 7" class="w-full h-full object-cover opacity-60
group-hover:opacity-100 transition-opacity duration-500
grayscale group-hover:grayscale-0" />
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:activity" width="12"></iconify-icon>
</span>
</div>
</div>
<div class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative
aspect-[4/3] rounded-lg overflow-hidden border
border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/917d6f93-fb36-439a-8c48-884b67b35381_1600w.jpg" alt="Backstage 8" class="w-full h-full object-cover opacity-60
group-hover:opacity-100 transition-opacity duration-500
grayscale group-hover:grayscale-0" />
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:map-pin" width="12"></iconify-icon>
</span>
</div>
</div>
<div class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative
aspect-[4/3] rounded-lg overflow-hidden border
border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/4734259a-bad7-422f-981e-ce01e79184f2_1600w.jpg" alt="Backstage 9" class="w-full h-full object-cover opacity-60
group-hover:opacity-100 transition-opacity duration-500
grayscale group-hover:grayscale-0" />
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:monitor-play" width="12"></iconify-icon>
</span>
</div>
</div>
<div class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative
aspect-[4/3] rounded-lg overflow-hidden border
border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c543a9e1-f226-4ced-80b0-feb8445a75b9_1600w.jpg" alt="Backstage 10" class="w-full h-full object-cover opacity-60
group-hover:opacity-100 transition-opacity duration-500
grayscale group-hover:grayscale-0" />
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:volume-2" width="12"></iconify-icon>
</span>
</div>
</div>
<div class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative
aspect-[4/3] rounded-lg overflow-hidden border
border-neutral-900 bg-neutral-900">
<img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=1000&auto=format&fit=crop" alt="Backstage 11" class="w-full h-full object-cover opacity-60
group-hover:opacity-100 transition-opacity duration-500
grayscale group-hover:grayscale-0" />
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:video" width="12"></iconify-icon>
</span>
</div>
</div>
<div class="snap-center shrink-0 w-[85vw] sm:w-[400px] group relative
aspect-[4/3] rounded-lg overflow-hidden border
border-neutral-900 bg-neutral-900">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/5bab247f-35d9-400d-a82b-fd87cfe913d2_1600w.webp" alt="Backstage 12" class="w-full h-full object-cover opacity-60
group-hover:opacity-100 transition-opacity duration-500
grayscale group-hover:grayscale-0" />
<div class="absolute bottom-0 left-0 w-full p-4 bg-gradient-to-t from-black/80 to-transparent">
<span class="text-xs font-medium text-white flex items-center gap-1">
<iconify-icon icon="lucide:check-circle" width="12"></iconify-icon>
</span>
</div>
</div>
</div>
</div>
</div>