이미지 라이트박스 구성 요소
비즈니스/기업 웹사이트를 위해 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>관련 구성 요소
Cyberpunk_Real_Estate_Lightbox
사이버펑크에서 영감을 받은 차분한 색 구성표가 있는 단순하고 반응이 빠른 이미지 라이트박스 구성 요소로, 부동산 리스팅에 적합합니다. 다크 모드 지원 기능이 있으며 시맨틱 HTML을 사용합니다.
이미지 라이트박스 구성 요소
'종이/인쇄물에서 영감을 받은' 디자인, 보석 색조 색 구성표 및 다크 모드를 지원하는 복잡하고 반응이 빠른 이미지 라이트박스 구성 요소로 음악/오디오 플랫폼에 적합합니다. 풍부한 대화형 요소가 특징입니다.