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

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>

関連コンポーネント

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

ダークモードをサポートするレスポンシブ画像ライトボックスコンポーネント。このコンポーネントには画像のギャラリーが表示され、画像をクリックすると、画像を参照するためのナビゲーション矢印を含む全画面モーダルが開きます。閉じるボタンが特徴で、インタラクティブな要素を強調表示するために鮮やかな色を使用しています。デザインはビジネス/企業のコンテキストに合わせて調整されており、プロフェッショナルでありながら魅力的なユーザーエクスペリエンスを保証します。

開ける

ジョブ/キャリアプラットフォーム用の画像ライトボックスコンポーネント

スイスのデザインの影響を受け、青い配色が施されたクリーンでミニマルなイメージライトボックスコンポーネントで、求人掲示板やキャリアプラットフォームに適しています。レスポンシブとダークモードをサポートしており、ユーザーはオーバーレイされたポップアップで画像を表示できます。

開ける

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

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

開ける