Компонент лайтбокса изображения
Отзывчивый компонент Image Lightbox, выполненный в стиле Material Design, с триадической цветовой схемой и поддержкой темного режима. Он подходит для портфолио, демонстрирующего работы или продукты.
HTML-код
<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>Связанные компоненты
Компонент лайтбокса изображения
Компонент лайтбокса с адаптивным изображением в стиле ретро/винтаж с использованием Tailwind CSS, поддерживающий темный режим и отображающий изображения-заполнители.
Компонент лайтбокса изображения
Ретро/винтажный компонент лайтбокса с яркими цветами, адаптивным дизайном и поддержкой темных тем, подходящий для портфолио.
Компонент лайтбокса изображения
Компонент лайтбокса с отзывчивым изображением и поддержкой темного режима. Этот компонент отображает галерею изображений, и при нажатии на изображение открывается полноэкранное модальное окно со стрелками навигации для просмотра изображений. Он оснащен кнопкой «Закрыть» и использует яркие цвета для выделения интерактивных элементов. Дизайн адаптирован к деловому / корпоративному контексту, обеспечивая профессиональный и в то же время привлекательный пользовательский опыт.