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>

関連コンポーネント

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

ミニマリストのフラットデザイン、単色の配色、適度な複雑さを備えたレスポンシブイメージライトボックスコンポーネントで、ソーシャルメディアインターフェイスに適しています。Tailwind CSSのdark:プレフィックスを使用したダークテーマをサポートし、JavaScriptは必要ありません。画像はpicsum.photosから提供されています。

開ける

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

マテリアルデザインスタイルでデザインされたレスポンシブ画像ライトボックスコンポーネントで、トライアドカラースキームとダークモードのサポートが特徴です。作品や製品を展示するポートフォリオに適しています。

開ける

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

Neumorphism デザイン スタイルと Tailwind CSS を使用したダーク テーマのサポートを備えたレスポンシブ イメージ ライトボックス コンポーネント。

開ける