Componentes de búsqueda

Categorías

Componentes Caja de luz de imagen

Caja de luz de imagen

Vista ampliada de imágenes con efecto de superposición

Componente de caja de luz de imagen

Un componente de caja de luz de imagen receptiva con un diseño retro / vintage y una combinación de colores en tonos tierra, adecuado para tableros.

Abrir Vista previa

                <div class="relative w-full p-4 max-w-4xl mx-auto">
    <!-- Thumbnail images -->
    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
        <img src="https://picsum.photos/300/200?random=1" alt="Image 1" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=1')" />
        <img src="https://picsum.photos/300/200?random=2" alt="Image 2" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=2')" />
        <img src="https://picsum.photos/300/200?random=3" alt="Image 3" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=3')" />
        <img src="https://picsum.photos/300/200?random=4" alt="Image 4" class="rounded-lg cursor-pointer transition-transform duration-200 transform hover:scale-105 dark:shadow-lg dark:shadow-yellow-600" onclick="openModal('https://picsum.photos/800/600?random=4')" />
    </div>

    <!-- Modal overlay -->
    <div id="imageModal" class="fixed inset-0 z-50 hidden bg-black bg-opacity-75 justify-center items-center dark:bg-opacity-90" onclick="closeModal()">
        <div class="relative w-11/12 md:w-3/4 lg:w-2/3">
            <span class="absolute top-2 right-2 text-white cursor-pointer" onclick="closeModal()">&times;</span>
            <img id="modalImage" class="rounded-lg shadow-lg" src="" alt="Modal Image" />
        </div>
    </div>
</div>

<!-- Tailwind CSS styles for dark mode and retro theme -->
<style>
    body {
        background-color: #f4f4e6;
        color: #333;
    }
    .dark body {
        background-color: #1a202c;
        color: #e2e8f0;
    }
</style>

Caja de luz de imagen

Componente de caja de luz de imagen receptiva con tema oscuro

Abrir Vista previa

                <div id="imageModal" class="fixed inset-0 z-50 hidden overflow-y-auto lg:flex lg:items-center lg:justify-center bg-black bg-opacity-90">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-3xl mx-auto">
    <div class="flex justify-between items-center border-b border-gray-200 dark:border-gray-700 px-4 py-3">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Image Title</h3>
      <button onclick="closeModal()" class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>
    <div class="p-4">
      <img src="https://picsum.photos/800/600" alt="Image" class="w-full h-auto rounded-lg">
    </div>
  </div>
</div>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4">
  <!-- Image cards to trigger the lightbox -->
  <div class="relative rounded-lg overflow-hidden shadow-md">
    <img src="https://picsum.photos/400/300" alt="Image" class="w-full h-48 object-cover cursor-pointer" onclick="openModal()">
    <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer" onclick="openModal()">
      <p class="text-white text-lg font-semibold">View Image</p>
    </div>
  </div>
    <div class="relative rounded-lg overflow-hidden shadow-md">
    <img src="https://picsum.photos/400/301" alt="Image" class="w-full h-48 object-cover cursor-pointer" onclick="openModal()">
    <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer" onclick="openModal()">
      <p class="text-white text-lg font-semibold">View Image</p>
    </div>
  </div>
      <div class="relative rounded-lg overflow-hidden shadow-md">
    <img src="https://picsum.photos/400/302" alt="Image" class="w-full h-48 object-cover cursor-pointer" onclick="openModal()">
    <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer" onclick="openModal()">
      <p class="text-white text-lg font-semibold">View Image</p>
    </div>
  </div>
      <div class="relative rounded-lg overflow-hidden shadow-md">
    <img src="https://picsum.photos/400/303" alt="Image" class="w-full h-48 object-cover cursor-pointer" onclick="openModal()">
    <div class="absolute inset-0 bg-black bg-opacity-20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity cursor-pointer" onclick="openModal()">
      <p class="text-white text-lg font-semibold">View Image</p>
    </div>
  </div>
  
</div>

<script>
function openModal() {
  document.getElementById('imageModal').classList.remove('hidden');
}

function closeModal() {
  document.getElementById('imageModal').classList.add('hidden');
}
</script>

Componente de caja de luz de imagen

Componente de caja de luz de imagen con diseño retro / vintage, combinación de colores análoga, complejidad simple, para fines comerciales / corporativos. Responsivo con soporte para temas oscuros. HTML solo con Tailwind CSS.

Abrir Vista previa

                <div class="container mx-auto px-4 py-8 dark:bg-gray-800">
  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
    <!-- Image 1 -->
    <div class="group relative">
      <img src="https://picsum.photos/600/400?random=1" alt="Gallery Image 1" class="w-full h-48 object-cover rounded-lg shadow-md transition-transform transform group-hover:scale-105">
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
        <p class="text-white text-lg font-bold">View Image</p>
      </div>
    </div>

    <!-- Image 2 -->
    <div class="group relative">
      <img src="https://picsum.photos/600/400?random=2" alt="Gallery Image 2" class="w-full h-48 object-cover rounded-lg shadow-md transition-transform transform group-hover:scale-105">
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
        <p class="text-white text-lg font-bold">View Image</p>
      </div>
    </div>

    <!-- Image 3 -->
    <div class="group relative">
      <img src="https://picsum.photos/600/400?random=3" alt="Gallery Image 3" class="w-full h-48 object-cover rounded-lg shadow-md transition-transform transform group-hover:scale-105">
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
        <p class="text-white text-lg font-bold">View Image</p>
      </div>
    </div>
    
    <!-- Add more images as needed -->

  </div>
</div>

Componente de caja de luz de imagen

Un componente de caja de luz de imagen receptivo diseñado para el comercio electrónico con un estilo de diseño plano minimalista, que admite temas claros y oscuros utilizando Tailwind CSS.

Abrir Vista previa

                <div class="relative inline-block cursor-pointer group">
    <img src="https://picsum.photos/600/400" alt="Lightbox" class="w-full h-auto rounded-lg shadow-sm transition duration-300 ease-in-out transform group-hover:scale-105">
    <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100 rounded-lg"></div>
    <div class="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100">
        <span class="text-white text-2xl font-semibold">View Image</span>
    </div>
</div>

<!-- Lightbox Modal -->
<div id="lightbox-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-80 hidden">
    <div class="relative w-full max-w-3xl">
        <img src="https://picsum.photos/1200/800" alt="Lightbox Image" class="w-full h-auto rounded-lg shadow-lg">
        <button class="absolute top-4 right-4 text-white bg-red-500 hover:bg-red-600 rounded-full p-2 transition duration-300 ease-in-out">✖</button>
    </div>
</div>

<style>
    /* Dark Mode Support */
    .dark .bg-gray-900 { background-color: #1b1b1b; }
    .dark .bg-black { background-color: #000; }
</style>

Componente de caja de luz de imagen

Un componente de caja de luz de imagen de estilo brutalista adecuado para un blog o plataforma de contenido, diseñado con tonos tierra y elementos interactivos complejos.

Abrir Vista previa

                <div class="relative flex flex-col items-center justify-center p-4 w-full max-w-screen-lg mx-auto bg-white dark:bg-gray-800 border-2 border-gray-700 dark:border-gray-300 rounded-lg overflow-hidden shadow-lg">
    <h2 class="text-3xl font-bold mb-4 text-gray-800 dark:text-gray-200">Image Lightbox</h2>
    <div class="flex flex-wrap justify-center gap-4">
        <!-- Image Thumbnails -->
        <div class="w-1/3 p-2">
            <img src="https://picsum.photos/300/200?random=1" alt="Example Image 1" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300" onclick="openLightbox('https://picsum.photos/600/400?random=1')">
        </div>
        <div class="w-1/3 p-2">
            <img src="https://picsum.photos/300/200?random=2" alt="Example Image 2" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300" onclick="openLightbox('https://picsum.photos/600/400?random=2')">
        </div>
        <div class="w-1/3 p-2">
            <img src="https://picsum.photos/300/200?random=3" alt="Example Image 3" class="cursor-pointer rounded-lg hover:scale-105 transition-transform duration-300" onclick="openLightbox('https://picsum.photos/600/400?random=3')">
        </div>
    </div>
    <!-- Lightbox Overlay -->
    <div id="lightbox" class="hidden fixed inset-0 z-50 bg-black bg-opacity-75 flex items-center justify-center transition-opacity duration-300">
        <span class="absolute top-4 right-4 text-white cursor-pointer" onclick="closeLightbox()">&times;</span>
        <img id="lightbox-img" class="max-w-full max-h-full object-contain" src="" alt="Lightbox Image">
    </div>
</div>

<script>
function openLightbox(imageUrl) {
    const lightbox = document.getElementById('lightbox');
    const lightboxImg = document.getElementById('lightbox-img');
    lightboxImg.src = imageUrl;
    lightbox.classList.remove('hidden');
}

function closeLightbox() {
    const lightbox = document.getElementById('lightbox');
    lightbox.classList.add('hidden');
}
</script>

Componente de caja de luz de imagen

Un componente de caja de luz de imagen responsiva simple diseñado para sitios web de comercio electrónico, con un estilo de modo oscuro y un esquema de color análogo.

Abrir Vista previa

                <div class="fixed inset-0 flex items-center justify-center bg-gray-900 dark:bg-gray-800 z-50">
    <div class="relative w-full max-w-2xl">
        <button class="absolute top-0 right-0 p-2 text-white hover:bg-gray-700 dark:hover:bg-gray-600 rounded-full focus:outline-none" aria-label="Close">
            &times;
        </button>
        <img src="https://picsum.photos/800/600" alt="Product Image" class="w-full h-auto rounded-lg shadow-lg">
        <div class="flex justify-between mt-4">
            <button class="flex items-center justify-center w-10 h-10 bg-gray-700 dark:bg-gray-600 rounded-full text-white hover:bg-gray-600 dark:hover:bg-gray-500">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-full h-full rounded-full">
            </button>
            <button class="flex items-center justify-center w-10 h-10 bg-gray-700 dark:bg-gray-600 rounded-full text-white hover:bg-gray-600 dark:hover:bg-gray-500">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-full h-full rounded-full">
            </button>
        </div>
    </div>
</div>

Componente de caja de luz de imagen

Componente de caja de luz de imagen minimalista con diseño receptivo y soporte de tema oscuro para fines de tablero. Utiliza picsum.photos para las imágenes.

Abrir Vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
    <!-- Image 1 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/1/300/200" alt="Image 1" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 2 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/2/300/200" alt="Image 2" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 3 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/3/300/200" alt="Image 3" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 4 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/4/300/200" alt="Image 4" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>
  </div>

  <!-- Lightbox Overlay (hidden by default) -->
  <div id="lightbox-overlay" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-75 hidden">
    <div class="relative">
      <img id="lightbox-image" src="" alt="Lightbox Image" class="max-w-3xl max-h-screen">
      <button id="close-lightbox" class="absolute top-4 right-4 text-white text-2xl font-bold">&times;</button>
    </div>
  </div>
</div>

Componente de caja de luz de imagen

Un componente de caja de luz de imagen responsiva diseñado en un estilo brutalista con tonos tierra. Cuenta con un soporte de modo oscuro para la visualización del tablero.

Abrir Vista previa

                <div class="relative"> 
    <!-- Lightbox trigger --> 
    <div class="group cursor-pointer"> 
        <img src="https://picsum.photos/300/200" alt="Thumbnail" class="w-full h-auto rounded-lg border-2 border-gray-700 dark:border-gray-300 transition-all duration-300 ease-in-out hover:scale-105"> 
    </div> 
    
    <!-- Lightbox overlay --> 
    <div class="hidden group-hover:block fixed inset-0 bg-gray-900 bg-opacity-75 flex items-center justify-center transition-opacity duration-300"> 
        <div class="relative p-4"> 
            <img src="https://picsum.photos/800/600" alt="Lightbox Image" class="max-w-full max-h-[90vh] rounded-lg border-4 border-yellow-500 dark:border-cyan-400 shadow-2xl"> 
            <button class="absolute top-2 right-2 bg-red-500 text-white p-2 rounded-full hover:bg-red-700 transition-colors duration-300">Close</button> 
        </div> 
    </div> 
</div> 

<!-- Avatar Section --> 
<div class="mt-4 flex items-center space-x-3"> 
    <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-700 dark:border-gray-300"> 
    <div class="text-lg text-gray-800 dark:text-gray-200"> 
        <h3 class="font-bold">User Name</h3> 
        <p class="text-sm text-gray-600 dark:text-gray-400">User Role</p> 
    </div> 
</div>

Componente de caja de luz de imagen

Un componente de caja de luz de imagen receptivo diseñado para tableros, con un estilo 3D y un esquema de color monocromático. Incluye efectos de desplazamiento y funcionalidad modal que utiliza Tailwind CSS para la compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg relative">
    <h2 class="text-white text-2xl font-semibold text-center mb-4">Image Lightbox</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div class="group relative rounded-lg overflow-hidden">
            <img src="https://picsum.photos/id/1018/400/300" alt="Sample Image" class="w-full h-auto rounded-lg group-hover:scale-105 transition-transform duration-300 ease-in-out" />
            <div class="absolute inset-0 bg-black bg-opacity-30 flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
                <button class="text-white bg-blue-500 hover:bg-blue-600 font-semibold py-2 px-4 rounded">View</button>
            </div>
        </div>
        <div class="group relative rounded-lg overflow-hidden">
            <img src="https://picsum.photos/id/1025/400/300" alt="Sample Image" class="w-full h-auto rounded-lg group-hover:scale-105 transition-transform duration-300 ease-in-out" />
            <div class="absolute inset-0 bg-black bg-opacity-30 flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
                <button class="text-white bg-blue-500 hover:bg-blue-600 font-semibold py-2 px-4 rounded">View</button>
            </div>
        </div>
        <div class="group relative rounded-lg overflow-hidden">
            <img src="https://picsum.photos/id/1032/400/300" alt="Sample Image" class="w-full h-auto rounded-lg group-hover:scale-105 transition-transform duration-300 ease-in-out" />
            <div class="absolute inset-0 bg-black bg-opacity-30 flex justify-center items-center opacity-0 group-hover:opacity-100 transition-opacity duration-300 ease-in-out">
                <button class="text-white bg-blue-500 hover:bg-blue-600 font-semibold py-2 px-4 rounded">View</button>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-white text-xl font-semibold mb-2">User Avatars</h3>
        <div class="flex space-x-4">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-400" />
            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-400" />
            <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-400" />
        </div>
    </div>
</div>

Componente de caja de luz de imagen

Un complejo componente de caja de luz de imagen diseñado en un estilo brutalista, adecuado para interfaces de redes sociales, con un esquema de color en escala de grises y alto contraste para compatibilidad con el modo oscuro.

Abrir Vista previa

                <div class="relative z-10">
    <!-- Thumbnail Trigger -->
    <div class="mb-4">
        <img src="https://picsum.photos/200/300" alt="Thumbnail" class="cursor-pointer h-auto w-full border border-gray-700 hover:border-gray-500 dark:border-gray-300 dark:hover:border-gray-100">
    </div>

    <!-- Modal for Lightbox -->
    <div class="fixed inset-0 bg-gray-900 bg-opacity-75 dark:bg-opacity-95 flex items-center justify-center hidden group-hover:block">
        <div class="bg-gray-800 w-full max-w-3xl p-6 rounded-lg shadow-lg border border-gray-700">
            <!-- Image Display -->
            <img src="https://picsum.photos/800/600" alt="Large Image" class="w-full h-auto mb-4 rounded-lg border border-gray-600 dark:border-gray-400">
            <!-- Close Button -->
            <button class="absolute top-4 right-4 text-white hover:text-gray-400">
                &times;
            </button>
            <div class="flex justify-end mt-4">
                <a href="#" class="text-gray-300 hover:text-gray-100 transition-colors duration-200">Next</a>
                <a href="#" class="ml-4 text-gray-300 hover:text-gray-100 transition-colors duration-200">Previous</a>
            </div>
        </div>
    </div>
</div>

<style>
    /* Brutalist Styles */
    img {
        user-select: none;
    }
    button {
        background: none;
        border: none;
        font-size: 2rem;
        cursor: pointer;
    }
    button:hover {
        color: #ddd;
    }
    .hidden {
        display: none;
    }
</style>