All Prompts
All Prompts
gallerymasonrytailwindresponsiveimagegridhoverempty-state
Responsive Masonry Image Gallery with Hover Actions
Адаптивная Masonry галерея изображений с эффектами при наведении. Идеально для портфолио, досок вдохновения, библиотек контента.
Prompt
<main class="mt-6 px-4" data-element-locator="html > body:nth-of-type(1) > main:nth-of-type(1)">
<div class="max-w-7xl mx-auto">
<div id="masonry" class="columns-1 sm:columns-2 lg:columns-3 xl:columns-4 gap-4">
<!-- Item -->
<article class="mb-4 reveal" data-tags="interior minimal workspace" data-title="Calm modern workspace"
data-date="2024-10-01"
style="break-inside: avoid; opacity: 1; transform: translateY(0px); transition: opacity 0.5s, transform 0.5s;">
<div
class="group rounded-2xl overflow-hidden bg-[#393D5E] ring-1 ring-white/10 hover:ring-white/20 hover:shadow-xl transition">
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c8f607a9-ba3f-4a7c-badb-cf0ecbf0c2ef_800w.jpg" alt="Calm modern workspace" class="w-full h-auto object-cover">
<div class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition">
<button class="px-3.5 py-1.5 rounded-full bg-purple-50 text-black text-xs hover:bg-purple-200" style="font-family:'Inter',sans-serif">Collect</button>
</div>
</div>
<div class="p-4">
<h4 class="text-sm font-medium text-slate-100" style="font-family:'Inter',sans-serif">Calm modern workspace
</h4>
<p class="text-xs text-slate-400 mt-1" style="font-family:'Inter',sans-serif">Clean and focused environment
</p>
</div>
</div>
</article>
<article class="mb-4 reveal" data-tags="nature landscape travel" data-title="Mountain Landscape"
data-date="2024-08-11"
style="break-inside: avoid; opacity: 1; transform: translateY(0px); transition: opacity 0.5s, transform 0.5s;">
<div
class="group rounded-2xl overflow-hidden bg-[#393D5E] ring-1 ring-white/10 hover:ring-white/20 hover:shadow-xl transition">
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1a40bff5-bbf9-4bda-b05d-e479626177de_800w.jpg" alt="Mountain Landscape" class="w-full h-auto object-cover">
<div class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition">
<button class="px-3.5 py-1.5 rounded-full bg-purple-50 text-black text-xs hover:bg-purple-200" style="font-family:'Inter',sans-serif">Collect</button>
</div>
</div>
<div class="p-4">
<h4 class="text-sm font-medium text-slate-100" style="font-family:'Inter',sans-serif">Mountain Landscape
</h4>
<p class="text-xs text-slate-400 mt-1" style="font-family:'Inter',sans-serif">Nature photography</p>
</div>
</div>
</article>
<article class="mb-4 reveal" data-tags="interior zen workspace minimal" data-title="Zen workspace aesthetic"
data-date="2024-09-12"
style="break-inside: avoid; opacity: 1; transform: translateY(0px); transition: opacity 0.5s, transform 0.5s;">
<div
class="group rounded-2xl overflow-hidden bg-[#393D5E] ring-1 ring-white/10 hover:ring-white/20 hover:shadow-xl transition">
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/48933b0d-af9c-47d1-bdc1-e0133dfc4f97_800w.jpg" alt="Zen workspace aesthetic" class="w-full h-auto object-cover">
<div class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition">
<button class="px-3.5 py-1.5 rounded-full bg-purple-50 text-black text-xs hover:bg-purple-200" style="font-family:'Inter',sans-serif">Collect</button>
</div>
</div>
<div class="p-4">
<h4 class="text-sm font-medium text-slate-100" style="font-family:'Inter',sans-serif">Zen workspace
aesthetic</h4>
<p class="text-xs text-slate-400 mt-1" style="font-family:'Inter',sans-serif">Minimalist productivity space
</p>
</div>
</div>
</article>
<article class="mb-4 reveal" data-tags="interior decor home" data-title="Interior Design" data-date="2024-06-30"
style="break-inside: avoid; opacity: 1; transform: translateY(0px); transition: opacity 0.5s, transform 0.5s;">
<div
class="group rounded-2xl overflow-hidden bg-[#393D5E] ring-1 ring-white/10 hover:ring-white/20 hover:shadow-xl transition">
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1c7bb6b6-6dc6-4648-bf8d-2108fd09ab1c_800w.jpg" alt="Interior Design" class="w-full h-auto object-cover">
<div class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition">
<button class="px-3.5 py-1.5 rounded-full bg-purple-50 text-black text-xs hover:bg-purple-200" style="font-family:'Inter',sans-serif">Collect</button>
</div>
</div>
<div class="p-4">
<h4 class="text-sm font-medium text-slate-100" style="font-family:'Inter',sans-serif">Interior Design</h4>
<p class="text-xs text-slate-400 mt-1" style="font-family:'Inter',sans-serif">Home decor ideas</p>
</div>
</div>
</article>
<article class="mb-4 reveal" data-tags="nature forest travel" data-title="Forest Path" data-date="2024-07-18"
style="break-inside: avoid; opacity: 1; transform: translateY(0px); transition: opacity 0.5s, transform 0.5s;">
<div
class="group rounded-2xl overflow-hidden bg-[#393D5E] ring-1 ring-white/10 hover:ring-white/20 hover:shadow-xl transition">
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/defe56a1-14e2-45ae-937e-80a44411e48a_800w.jpg" alt="Forest Path" class="w-full h-auto object-cover">
<div class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition">
<button class="px-3.5 py-1.5 rounded-full bg-purple-50 text-black text-xs hover:bg-purple-200" style="font-family:'Inter',sans-serif">Collect</button>
</div>
</div>
<div class="p-4">
<h4 class="text-sm font-medium text-slate-100" style="font-family:'Inter',sans-serif">Forest Path</h4>
<p class="text-xs text-slate-400 mt-1" style="font-family:'Inter',sans-serif">Nature wanderlust</p>
</div>
</div>
</article>
<article class="mb-4 reveal" data-tags="fashion style editorial" data-title="Fashion Style" data-date="2024-05-26"
style="break-inside: avoid; opacity: 1; transform: translateY(0px); transition: opacity 0.5s, transform 0.5s;">
<div
class="group rounded-2xl overflow-hidden bg-[#393D5E] ring-1 ring-white/10 hover:ring-white/20 hover:shadow-xl transition">
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/1ba266bd-81e8-4c6b-b290-bdcb56dc9f72_800w.jpg" alt="Fashion Style" class="w-full h-auto object-cover">
<div class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition">
<button class="px-3.5 py-1.5 rounded-full bg-purple-50 text-black text-xs hover:bg-purple-200" style="font-family:'Inter',sans-serif">Collect</button>
</div>
</div>
<div class="p-4">
<h4 class="text-sm font-medium text-slate-100" style="font-family:'Inter',sans-serif">Fashion Style</h4>
<p class="text-xs text-slate-400 mt-1" style="font-family:'Inter',sans-serif">Style inspiration</p>
</div>
</div>
</article>
<article class="mb-4 reveal" data-tags="tech innovation digital 3d" data-title="Tech Innovation"
data-date="2024-09-02"
style="break-inside: avoid; opacity: 1; transform: translateY(0px); transition: opacity 0.5s, transform 0.5s;">
<div
class="group rounded-2xl overflow-hidden bg-[#393D5E] ring-1 ring-white/10 hover:ring-white/20 hover:shadow-xl transition">
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/65e5d0f0-a5eb-4753-82ae-6c1026ca3333_800w.jpg" alt="Tech Innovation" class="w-full h-auto object-cover">
<div class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition">
<button class="px-3.5 py-1.5 rounded-full bg-purple-50 text-black text-xs hover:bg-purple-200" style="font-family:'Inter',sans-serif">Collect</button>
</div>
</div>
<div class="p-4">
<h4 class="text-sm font-medium text-slate-100" style="font-family:'Inter',sans-serif">Tech Innovation</h4>
<p class="text-xs text-slate-400 mt-1" style="font-family:'Inter',sans-serif">Future technology</p>
</div>
</div>
</article>
<article class="mb-4 reveal" data-tags="travel ocean seascape motion" data-title="Ocean Views"
data-date="2024-04-14"
style="break-inside: avoid; opacity: 1; transform: translateY(0px); transition: opacity 0.5s, transform 0.5s;">
<div
class="group rounded-2xl overflow-hidden bg-[#393D5E] ring-1 ring-white/10 hover:ring-white/20 hover:shadow-xl transition">
<div class="relative">
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/72c0a942-8db1-4109-b875-9ccb3cee3299_800w.jpg" alt="Ocean Views" class="w-full h-auto object-cover">
<div class="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition">
<button class="px-3.5 py-1.5 rounded-full bg-purple-50 text-black text-xs hover:bg-purple-200" style="font-family:'Inter',sans-serif">Collect</button>
</div>
</div>
<div class="p-4">
<h4 class="text-sm font-medium text-slate-100" style="font-family:'Inter',sans-serif">Ocean Views</h4>
<p class="text-xs text-slate-400 mt-1" style="font-family:'Inter',sans-serif">Travel destinations</p>
</div>
</div>
</article>
</div>
<!-- Empty state -->
<div id="emptyState" class="hidden text-center py-16">
<div
class="inline-flex items-center justify-center w-12 h-12 rounded-xl bg-slate-900 border border-white/10 mb-4">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="search"
class="lucide lucide-search text-slate-400">
<path d="m21 21-4.34-4.34" class=""></path>
<circle cx="11" cy="11" r="8" class=""></circle>
</svg>
</div>
<h4 class="text-lg font-medium mb-1" style="font-family:'Inter',sans-serif">No results found</h4>
<p class="text-sm text-slate-400" style="font-family:'Inter',sans-serif">Try a different keyword or filter.</p>
</div>
</div>
</main>