组件 图像灯箱 图片灯箱组件

图片灯箱组件

一个响应式图片灯箱组件,采用Neumorphism设计风格,并使用Tailwind CSS支持暗黑主题。

预览

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>

相关组件

Image Lightbox 组件

用于 CRM/业务工具的有趣图像灯箱组件,具有灰度配色方案、圆角元素和用于交互式图像查看的复杂界面。完全响应,支持深色模式。

打开

Image Lightbox 组件

复古/复古图像灯箱组件,具有鲜艳的色彩、响应式设计和深色主题支持,适用于投资组合。

打开

图片灯箱组件

一个以材料设计风格设计的响应式图片灯箱组件,具有三色配色方案和对暗模式的支持。适合用于作品集展示作品或产品.

打开