ai image generator grid gallery variations hover ai image generator grid gallery variations download upscale image generator with grid output ai image gallery with multiple variations
Image Generator Grid
Fetch pattern JSON:
curl https://webspire.de/patterns/image-generator/grid.json grid.html
<section
class="mx-auto max-w-3xl overflow-hidden rounded-2xl border shadow-md"
style="
--ws-image-generator-bg: oklch(0.985 0.002 75);
--ws-image-generator-text: oklch(0.205 0.015 75);
--ws-image-generator-text-soft: oklch(0.556 0.01 75);
--ws-image-generator-border: oklch(0.885 0.008 75);
--ws-image-generator-accent: oklch(0.588 0.16 250);
--ws-image-generator-action-bg: oklch(0.588 0.16 250);
--ws-image-generator-action-text: oklch(0.985 0.002 75);
background: var(--ws-image-generator-bg);
color: var(--ws-image-generator-text);
border-color: var(--ws-image-generator-border);
"
>
<!-- Prompt input -->
<div class="p-6">
<label for="img-gen-grid-prompt" class="sr-only">Describe your image</label>
<div class="flex items-center gap-3">
<input
id="img-gen-grid-prompt"
type="text"
placeholder="Describe your image..."
class="flex-1 rounded-xl border px-4 py-3 text-sm outline-none transition focus:ring-2"
style="border-color: var(--ws-image-generator-border); background: var(--ws-image-generator-bg); color: var(--ws-image-generator-text)"
/>
<button
type="button"
class="shrink-0 rounded-xl px-5 py-3 text-sm font-medium transition hover:opacity-90"
style="background: var(--ws-image-generator-action-bg); color: var(--ws-image-generator-action-text)"
>
Generate 4
</button>
</div>
</div>
<!-- 2x2 Image grid -->
<div class="grid grid-cols-1 gap-3 px-6 pb-6 sm:grid-cols-2">
<!-- Image 1 -->
<div class="group relative overflow-hidden rounded-xl" role="img" aria-label="Generated image variant 1">
<div
class="flex aspect-square items-center justify-center"
style="background: linear-gradient(135deg, oklch(0.72 0.14 250), oklch(0.58 0.18 280))"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white/30" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" />
</svg>
</div>
<div class="absolute inset-x-0 bottom-0 flex items-center justify-end gap-2 bg-gradient-to-t from-black/60 to-transparent p-3 opacity-0 transition group-hover:opacity-100">
<button
type="button"
class="flex h-8 w-8 items-center justify-center rounded-lg bg-white/20 text-white backdrop-blur-sm transition hover:bg-white/30"
aria-label="Download image 1"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
</button>
<button
type="button"
class="flex h-8 w-8 items-center justify-center rounded-lg bg-white/20 text-white backdrop-blur-sm transition hover:bg-white/30"
aria-label="Upscale image 1"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
</svg>
</button>
</div>
</div>
<!-- Image 2 -->
<div class="group relative overflow-hidden rounded-xl" role="img" aria-label="Generated image variant 2">
<div
class="flex aspect-square items-center justify-center"
style="background: linear-gradient(135deg, oklch(0.7 0.12 160), oklch(0.55 0.16 190))"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white/30" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" />
</svg>
</div>
<div class="absolute inset-x-0 bottom-0 flex items-center justify-end gap-2 bg-gradient-to-t from-black/60 to-transparent p-3 opacity-0 transition group-hover:opacity-100">
<button
type="button"
class="flex h-8 w-8 items-center justify-center rounded-lg bg-white/20 text-white backdrop-blur-sm transition hover:bg-white/30"
aria-label="Download image 2"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
</button>
<button
type="button"
class="flex h-8 w-8 items-center justify-center rounded-lg bg-white/20 text-white backdrop-blur-sm transition hover:bg-white/30"
aria-label="Upscale image 2"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
</svg>
</button>
</div>
</div>
<!-- Image 3 -->
<div class="group relative overflow-hidden rounded-xl" role="img" aria-label="Generated image variant 3">
<div
class="flex aspect-square items-center justify-center"
style="background: linear-gradient(135deg, oklch(0.68 0.15 30), oklch(0.55 0.18 50))"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white/30" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" />
</svg>
</div>
<div class="absolute inset-x-0 bottom-0 flex items-center justify-end gap-2 bg-gradient-to-t from-black/60 to-transparent p-3 opacity-0 transition group-hover:opacity-100">
<button
type="button"
class="flex h-8 w-8 items-center justify-center rounded-lg bg-white/20 text-white backdrop-blur-sm transition hover:bg-white/30"
aria-label="Download image 3"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
</button>
<button
type="button"
class="flex h-8 w-8 items-center justify-center rounded-lg bg-white/20 text-white backdrop-blur-sm transition hover:bg-white/30"
aria-label="Upscale image 3"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
</svg>
</button>
</div>
</div>
<!-- Image 4 -->
<div class="group relative overflow-hidden rounded-xl" role="img" aria-label="Generated image variant 4">
<div
class="flex aspect-square items-center justify-center"
style="background: linear-gradient(135deg, oklch(0.65 0.12 320), oklch(0.52 0.16 350))"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white/30" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" />
</svg>
</div>
<div class="absolute inset-x-0 bottom-0 flex items-center justify-end gap-2 bg-gradient-to-t from-black/60 to-transparent p-3 opacity-0 transition group-hover:opacity-100">
<button
type="button"
class="flex h-8 w-8 items-center justify-center rounded-lg bg-white/20 text-white backdrop-blur-sm transition hover:bg-white/30"
aria-label="Download image 4"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
</svg>
</button>
<button
type="button"
class="flex h-8 w-8 items-center justify-center rounded-lg bg-white/20 text-white backdrop-blur-sm transition hover:bg-white/30"
aria-label="Upscale image 4"
>
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
</svg>
</button>
</div>
</div>
</div>
<!-- Status bar -->
<div
class="flex items-center justify-between border-t px-6 py-3"
style="border-color: var(--ws-image-generator-border)"
>
<p class="text-xs" style="color: var(--ws-image-generator-text-soft)">4 variations generated</p>
<p class="text-xs" style="color: var(--ws-image-generator-text-soft)">512 × 512 each</p>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
aiimagegeneratorgridgalleryvariationshover
Slots
| Name | Required | Description |
|---|---|---|
| content | Yes | Main content area |
Enhanced variant with gallery-style output. Prompt input at top, 2x2 grid of image placeholders with distinct gradient colors. Each image reveals Download and Upscale buttons on hover via group-hover overlay.