이미지 라이트박스 구성 요소
미니멀한 플랫 디자인, 단색 색 구성표 및 적당한 복잡성을 갖춘 반응형 이미지 라이트박스 구성 요소로 소셜 미디어 인터페이스에 적합합니다. Tailwind CSS의 dark: 접두사를 사용하여 어두운 테마를 지원하며 JavaScript가 필요하지 않습니다. 이미지의 출처는 picsum.photos입니다.
HTML 코드
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Image 1 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image1/600/400" alt="Image 1" class="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 rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
<!-- Image 2 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image2/600/400" alt="Image 2" class="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 rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
<!-- Image 3 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image3/600/400" alt="Image 3" class="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 rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
<!-- Image 4 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image4/600/400" alt="Image 4" class="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 rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
<!-- Image 5 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image5/600/400" alt="Image 5" class="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 rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
<!-- Image 6 -->
<div class="relative group cursor-pointer">
<img src="https://picsum.photos/seed/image6/600/400" alt="Image 6" class="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 rounded-lg">
<p class="text-white text-lg font-semibold">View Image</p>
</div>
</div>
</div>
<!-- Lightbox Overlay (Hidden by default, would be shown with JS) -->
<div id="lightbox" class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden">
<div class="relative">
<img src="" alt="Lightbox Image" id="lightbox-image" class="max-w-3xl max-h-3xl rounded-lg shadow-lg">
<button class="absolute top-4 right-4 text-white text-3xl">×</button>
</div>
</div>
</div>관련 구성 요소
이미지 라이트박스 구성 요소
다크 모드를 지원하는 반응형 이미지 라이트박스 구성 요소입니다. 이 구성 요소는 이미지 갤러리를 표시하고, 이미지를 클릭하면 탐색 화살표가 있는 전체 화면 모달이 열려 이미지를 탐색할 수 있습니다. 닫기 버튼이 있으며 대화형 요소를 강조하기 위해 생생한 색상을 사용합니다. 디자인은 비즈니스/기업 컨텍스트에 맞게 조정되어 전문적이면서도 매력적인 사용자 경험을 보장합니다.
레트로 이미지 라이트박스 컴포넌트
레트로/빈티지 디자인, 아날로그 색 구성표 및 다크 모드 지원을 갖춘 반응형의 간단한 이미지 라이트박스 구성 요소로 블로그 및 콘텐츠 사이트에 적합합니다.