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

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

Tailwind CSS를 사용하여 Neumorphism 디자인 스타일 및 어두운 테마를 지원하는 반응형 이미지 라이트박스 구성 요소입니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="relative group">
        <img src="https://picsum.photos/300/200" alt="Thumbnail" class="w-48 h-32 rounded-lg shadow-neu transition-transform duration-300 group-hover:scale-105" />
        <div class="hidden absolute top-0 left-0 right-0 bottom-0 bg-white bg-opacity-75 dark:bg-gray-800 rounded-lg shadow-neu group-hover:block">
            <div class="flex items-center justify-center h-full">
                <img src="https://picsum.photos/600/400" alt="Lightbox image" class="max-w-full h-auto rounded-lg" />
            </div>
        </div>
    </div>
</div>

<style>
    .shadow-neu {
        box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), 
                    -8px -8px 20px rgba(255, 255, 255, 0.9);
    }
</style>

관련 구성 요소

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

블로그 또는 콘텐츠 플랫폼에 적합한 브루탈리즘 스타일의 이미지 라이트박스 구성 요소로, 흙색과 복잡한 인터랙티브 요소로 디자인되었습니다.

열다

Memphis_Monochrome_Image_Lightbox

멤피스 디자인(Memphis Design)의 영향을 받은 단순하고 반응이 빠른 이미지 라이트박스 컴포넌트로, 하나의 밝은 액센트 컬러가 있는 모노크롬 팔레트가 특징입니다. 직업/경력 플랫폼용으로 설계되었습니다.

열다

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

미니멀한 플랫 디자인, 단색 색 구성표 및 적당한 복잡성을 갖춘 반응형 이미지 라이트박스 구성 요소로 소셜 미디어 인터페이스에 적합합니다. Tailwind CSS의 dark: 접두사를 사용하여 어두운 테마를 지원하며 JavaScript가 필요하지 않습니다. 이미지의 출처는 picsum.photos입니다.

열다