CCHub Logo CCHub Tailwind Collection
구성 요소 이미지 라이트박스 이미지 라이트박스 구성 요소

이미지 라이트박스 구성 요소

미니멀리스트 이미지 라이트박스 컴포넌트는 반응형 디자인과 대시보드 목적을 위한 어두운 테마를 지원합니다. 이미지에 picsum.photos를 사용합니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
    <!-- Image 1 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/1/300/200" alt="Image 1" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 2 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/2/300/200" alt="Image 2" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 3 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/3/300/200" alt="Image 3" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>

    <!-- Image 4 -->
    <div class="relative group">
      <img src="https://picsum.photos/seed/4/300/200" alt="Image 4" class="object-cover w-full h-48 rounded-lg">
      <div class="absolute inset-0 flex items-center justify-center bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity">
        <button class="text-white text-lg font-bold">View</button>
      </div>
    </div>
  </div>

  <!-- Lightbox Overlay (hidden by default) -->
  <div id="lightbox-overlay" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-75 hidden">
    <div class="relative">
      <img id="lightbox-image" src="" alt="Lightbox Image" class="max-w-3xl max-h-screen">
      <button id="close-lightbox" class="absolute top-4 right-4 text-white text-2xl font-bold">&times;</button>
    </div>
  </div>
</div>

관련 구성 요소

이미지 라이트박스 구성 요소

스큐어모픽 요소와 파스텔 색상 구성표로 설계된 복잡한 Image Lightbox 구성 요소로, 대시보드 환경에 적합합니다. 여기에는 반응형 레이아웃, 어두운 테마 지원 및 대화형 인터페이스가 포함됩니다.

열다

이미지 라이트박스 구성 요소

브루탈리즘 스타일로 디자인된 복잡한 이미지 라이트박스 컴포넌트로, 소셜 미디어 인터페이스에 적합하며, 그레이스케일 색 구성표와 다크 모드 지원을 위한 고대비가 특징입니다.

열다

이미지 라이트박스 구성 요소

Tailwind CSS를 사용하여 어두운 모드에서 설계된 반응형 이미지 라이트박스 구성 요소입니다. 어두운 배경, 불투명도 효과 및 다양한 화면 크기를 수용할 수 있는 반응형 디자인이 특징입니다.

열다