Компоненты Изображение Лайтбокс Компонент лайтбокса изображения

Компонент лайтбокса изображения

Адаптивный компонент Image Lightbox, разработанный с 3D-элементами, яркими цветами и умеренной сложностью для бизнес/корпоративных сайтов. Он поддерживает стилизацию темного режима с помощью Tailwind CSS.

Предварительный просмотр

HTML-код

<div class="relative p-4 max-w-lg mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- Thumbnail Images -->
        <div class="group">
            <div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
                <img src="https://picsum.photos/400/300?random=1" alt="Image 1" class="w-full h-full object-cover rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
                    <button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
                </div>
            </div>
        </div>
        <div class="group">
            <div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
                <img src="https://picsum.photos/400/300?random=2" alt="Image 2" class="w-full h-full object-cover rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
                    <button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
                </div>
            </div>
        </div>
        <div class="group">
            <div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
                <img src="https://picsum.photos/400/300?random=3" alt="Image 3" class="w-full h-full object-cover rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
                    <button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
                </div>
            </div>
        </div>
        <div class="group">
            <div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
                <img src="https://picsum.photos/400/300?random=4" alt="Image 4" class="w-full h-full object-cover rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
                    <button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Dark Mode Support -->
<style>
    .bg-vibrant-500 {
        background-color: #ff4c4c; /* Example vibrant color */
    }

    @media (prefers-color-scheme: dark) {
        .bg-vibrant-500 {
            background-color: #ff6b6b; /* Dark mode vibrant color */
        }
    }
</style>

Связанные компоненты

Компонент лайтбокса изображения

Простой, отзывчивый, стилизованный под стекломорфизм компонент лайтбокса с океаническими/синими тонами для социальных сетей, поддерживающий темный режим.

Открытый

Компонент лайтбокса изображения

Ретро/винтажный компонент лайтбокса с яркими цветами, адаптивным дизайном и поддержкой темных тем, подходящий для портфолио.

Открытый

Компонент лайтбокса изображения

Компонент лайтбокса с отзывчивым изображением и поддержкой темного режима. Этот компонент отображает галерею изображений, и при нажатии на изображение открывается полноэкранное модальное окно со стрелками навигации для просмотра изображений. Он оснащен кнопкой «Закрыть» и использует яркие цвета для выделения интерактивных элементов. Дизайн адаптирован к деловому / корпоративному контексту, обеспечивая профессиональный и в то же время привлекательный пользовательский опыт.

Открытый