Search Components

Image Lightbox

Enlarged view of images with overlay effect

Retro Image Lightbox Component

A responsive, simple Image Lightbox Component with Retro/Vintage design, Analogous color scheme, and dark mode support, suitable for blogs and content sites.

Open Preview

                <
  div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4 font-mono bg-gray-200 dark:bg-gray-800"
>
  <
    div
    class="relative group cursor-pointer"
    onclick="this.querySelector('.lightbox').classList.remove('hidden')"
  >
    <
      img
      src="https://picsum.photos/seed/retro1/500/300"
      alt="Retro Image 1"
      class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-yellow-600 dark:border-yellow-400"
    >
    <
      div
      class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
      onclick="event.stopPropagation(); this.classList.add('hidden')"
    >
      <
        img
        src="https://picsum.photos/seed/retro1/800/600"
        alt="Retro Image 1 Enlarged"
        class="max-w-full max-h-full border-4 border-yellow-600 dark:border-yellow-400"
      >
    <
    /div
  >

  <
    div
    class="relative group cursor-pointer"
    onclick="this.querySelector('.lightbox').classList.remove('hidden')"
  >
    <
      img
      src="https://picsum.photos/seed/retro2/500/300"
      alt="Retro Image 2"
      class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-orange-600 dark:border-orange-400"
    >
    <
      div
      class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
      onclick="event.stopPropagation(); this.classList.add('hidden')"
    >
      <
        img
        src="https://picsum.photos/seed/retro2/800/600"
        alt="Retro Image 2 Enlarged"
        class="max-w-full max-h-full border-4 border-orange-600 dark:border-orange-400"
      >
    <
    /div
  >


  <
    div
    class="relative group cursor-pointer"
    onclick="this.querySelector('.lightbox').classList.remove('hidden')"
  >
    <
      img
      src="https://picsum.photos/seed/retro3/500/300"
      alt="Retro Image 3"
      class="w-full h-auto object-cover transform hover:scale-105 transition-transform duration-300 border-4 border-red-600 dark:border-red-400"
    >
    <
      div
      class="lightbox hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50"
      onclick="event.stopPropagation(); this.classList.add('hidden')"
    >
      <
        img
        src="https://picsum.photos/seed/retro3/800/600"
        alt="Retro Image 3 Enlarged"
        class="max-w-full max-h-full border-4 border-red-600 dark:border-red-400"
      >
    <
    /div
  >
<
/div
>

Image Lightbox Component

A responsive Image Lightbox component designed in Material Design style, featuring a triadic color scheme and support for dark mode. It's suitable for portfolio showcasing work or products.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
    <h2 class="mb-4 text-2xl font-semibold text-gray-800 dark:text-gray-200">Portfolio Showcase</h2>
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=1" alt="Portfolio Image 1" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=2" alt="Portfolio Image 2" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=3" alt="Portfolio Image 3" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=4" alt="Portfolio Image 4" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=5" alt="Portfolio Image 5" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
        <div class="relative group">
            <img src="https://picsum.photos/300/200?random=6" alt="Portfolio Image 6" class="w-full h-auto rounded-lg shadow-md cursor-pointer transition-transform transform duration-200 hover:scale-105">
            <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-0 group-hover:bg-opacity-50 transition-opacity duration-200">
                <button class="px-4 py-2 text-white bg-blue-500 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity">View</button>
            </div>
        </div>
    </div>
</div>

Image Lightbox Component

A responsive Image Lightbox component designed for e-commerce, featuring dark mode support and an earth tones color scheme.

Open Preview

                <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 hidden dark:block" id="lightbox">
    <div class="relative bg-gray-800 rounded-lg overflow-hidden shadow-lg">
        <button class="absolute top-3 right-3 text-white focus:outline-none" onclick="document.getElementById('lightbox').classList.add('hidden')">&times;</button>
        <img class="w-full h-auto" src="https://picsum.photos/800/600" alt="Product Image">
        <div class="p-4">
            <div class="flex items-center space-x-3">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
                <div class="text-white">
                    <p class="text-sm font-semibold">John Doe</p>
                    <p class="text-xs text-gray-400">E-commerce Store</p>
                </div>
            </div>
            <p class="mt-2 text-xs text-gray-300">Image description or product details can go here.</p>
        </div>
    </div>
</div>

<div class="flex justify-center py-6">
    <button class="bg-green-600 text-white py-2 px-4 rounded-lg focus:outline-none hover:bg-green-500" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        Open Lightbox
    </button>
</div>

Image Lightbox Component

A responsive image lightbox component designed in dark mode using Tailwind CSS. It features a dark background, opacity effects, and responsive designs to accommodate various screen sizes.

Open Preview

                <div class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-75 hidden" id="lightbox">
    <div class="relative">
        <img src="https://picsum.photos/800/600" alt="Lightbox Image" class="rounded-lg shadow-lg">
        <button class="absolute top-2 right-2 text-white bg-gray-800 hover:bg-gray-700 rounded-full p-2 focus:outline-none" onclick="document.getElementById('lightbox').classList.add('hidden')">
            &times;
        </button>
    </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4">
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/200" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/201" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/202" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/203" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/204" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
    <div class="cursor-pointer" onclick="document.getElementById('lightbox').classList.remove('hidden')">
        <img src="https://picsum.photos/300/205" alt="Thumbnail" class="rounded-lg shadow-md">
    </div>
</div>

Image Lightbox Component

A responsive image lightbox component with a retro/vintage theme using Tailwind CSS, supporting dark mode and featuring placeholder images.

Open Preview

                <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-md mx-auto mt-10">
    <img id="lightbox-trigger" src="https://picsum.photos/600/400?random=1" class="w-full h-48 object-cover rounded-t-lg" alt="Vintage Image">
    <div class="p-4">
        <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Vintage Aesthetic</h2>
        <p class="text-gray-600 dark:text-gray-400">A nostalgic look into the past with a touch of modern design.</p>
    </div>
    <div class="flex justify-center pb-4">
        <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">View More Images</button>
    </div>
    <div id="lightbox" class="hidden fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">
        <span class="absolute top-4 right-4 text-white cursor-pointer" onclick="document.getElementById('lightbox').classList.add('hidden')">&times;</span>
        <img src="https://picsum.photos/1200/800?random=1" class="max-w-full max-h-full rounded shadow-lg" alt="Lightbox Image">
    </div>
</div>

<style>
    /* Dark mode styling */
    @media (prefers-color-scheme: dark) {
        .bg-white {
            background-color: #1f2937;
        }
        .text-gray-800 {
            color: #e5e7eb;
        }
        .text-gray-600 {
            color: #d1d5db;
        }
    }
</style>

Image Lightbox Component

A skeuomorphic image lightbox component designed to mimic real-world counterparts, featuring responsive effects and dark theme support using Tailwind CSS.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="relative group w-full max-w-2xl bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
        <img src="https://picsum.photos/600/400" alt="Lightbox Image" class="w-full h-auto rounded-lg transition ease-in-out duration-300 transform group-hover:scale-105" />
        <div class="absolute inset-0 bg-black opacity-0 group-hover:opacity-50 transition-opacity duration-300 rounded-lg"></div>
        <div class="absolute bottom-0 left-0 right-0 p-4 text-white">
            <h2 class="font-bold text-lg">Image Title</h2>
            <p class="text-sm">Image description goes here.</p>
        </div>
    </div>

    <div class="mt-4">
        <button class="p-2 px-4 bg-blue-600 text-white rounded hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 shadow-lg">
            <span class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2" />
                View User's Images
            </span>
        </button>
    </div>
</div>

Image Lightbox Component

A responsive image lightbox component designed with Glassmorphism style using Tailwind CSS. The component supports a dark theme with frosted glass-like translucent elements and blur effects.

Open Preview

                <div class="relative">
    <button class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 inline-flex items-center p-2" id="open-lightbox">
        <img src="https://picsum.photos/40/40?random" alt="Thumbnail" class="rounded-full">
    </button>
    <div class="hidden fixed inset-0 bg-black bg-opacity-50 transition-opacity" id="lightbox">
        <div class="flex items-center justify-center h-full">
            <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-lg rounded-lg p-4">
                <img src="https://picsum.photos/800/600?random" alt="Lightbox Image" class="rounded-md">
                <button class="mt-4 bg-red-500 dark:bg-red-700 text-white rounded-lg p-2 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" id="close-lightbox">Close</button>
            </div>
        </div>
    </div>
</div>

<style>
    /* Lightbox toggle visibility */
    #lightbox:target {
        display: flex;
    }
</style>

Image Lightbox Component

A responsive image lightbox component with Neumorphism design style and dark theme support using Tailwind CSS.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="relative group">
        <img src="https://picsum.photos/300/200" alt="Thumbnail" class="w-48 h-32 rounded-lg shadow-neu transition-transform duration-300 group-hover:scale-105" />
        <div class="hidden absolute top-0 left-0 right-0 bottom-0 bg-white bg-opacity-75 dark:bg-gray-800 rounded-lg shadow-neu group-hover:block">
            <div class="flex items-center justify-center h-full">
                <img src="https://picsum.photos/600/400" alt="Lightbox image" class="max-w-full h-auto rounded-lg" />
            </div>
        </div>
    </div>
</div>

<style>
    .shadow-neu {
        box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), 
                    -8px -8px 20px rgba(255, 255, 255, 0.9);
    }
</style>

Search Components

Categories

Image Lightbox