CCHub Logo CCHub Tailwind Collection
コンポーネント 画像ライトボックス イメージライトボックスコンポーネント

イメージライトボックスコンポーネント

ミニマリストのフラットなデザインスタイルで電子商取引向けに設計されたレスポンシブ画像ライトボックスコンポーネントで、Tailwind CSSを使用して明るいテーマと暗いテーマをサポートします。

プレビュー

HTMLコード 

<div class="relative inline-block cursor-pointer group">
    <img src="https://picsum.photos/600/400" alt="Lightbox" class="w-full h-auto rounded-lg shadow-sm transition duration-300 ease-in-out transform group-hover:scale-105">
    <div class="absolute inset-0 bg-black bg-opacity-50 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100 rounded-lg"></div>
    <div class="absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100">
        <span class="text-white text-2xl font-semibold">View Image</span>
    </div>
</div>

<!-- Lightbox Modal -->
<div id="lightbox-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-gray-900 bg-opacity-80 hidden">
    <div class="relative w-full max-w-3xl">
        <img src="https://picsum.photos/1200/800" alt="Lightbox Image" class="w-full h-auto rounded-lg shadow-lg">
        <button class="absolute top-4 right-4 text-white bg-red-500 hover:bg-red-600 rounded-full p-2 transition duration-300 ease-in-out">✖</button>
    </div>
</div>

<style>
    /* Dark Mode Support */
    .dark .bg-gray-900 { background-color: #1b1b1b; }
    .dark .bg-black { background-color: #000; }
</style>

関連コンポーネント

イメージライトボックスコンポーネント

e コマース用に設計されたレスポンシブ イメージ ライトボックス コンポーネントで、ダーク モードのサポートとアース トーンの配色が特徴です。

開ける

不動産用のセピアトーンを備えたGlassmorphismライトボックス

曇りガラスのような半透明の要素とセピア/ブラウンの色調を特徴とする、ガラスモルフィズムデザインのレスポンシブ画像ライトボックスコンポーネントで、不動産物件の画像ギャラリーに適しています。ダークモードのサポートが含まれています。

開ける

サイバーパンク農業用イメージライトボックス

サイバーパンクの美学を備えた複雑でレスポンシブな画像ライトボックスコンポーネントで、紫/紫の配色が特徴で、農業および農業のWebサイト向けに設計されています。ダークモードをサポートし、タイトル、説明、および基本的なメタデータを含む画像を表示します。

開ける