이미지 라이트박스 구성 요소
레트로/빈티지 디자인의 이미지 라이트박스 구성 요소, 유사한 색 구성표, 단순한 복잡성, 비즈니스/기업용. 어두운 테마 지원으로 반응형입니다. HTML은 Tailwind CSS에서만 사용할 수 있습니다.
HTML 코드
<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>관련 구성 요소
Glassmorphism 부동산을 위한 세피아 톤의 라이트박스
글래스모피즘 디자인의 반응형 이미지 라이트박스 구성 요소로, 젖빛 유리와 같은 반투명 요소와 세피아/갈색 색조를 특징으로 하여 부동산 부동산 이미지 갤러리에 적합합니다. 다크 모드 지원이 포함됩니다.
이미지 라이트박스 구성 요소
대시보드용으로 설계된 반응형 이미지 라이트박스 구성 요소로, 3D 스타일과 단색 색 구성표를 특징으로 합니다. 여기에는 다크 모드 지원을 위해 Tailwind CSS를 사용하는 호버 효과 및 모달 기능이 포함되어 있습니다.