パーツ番号 07-11-04 ・ CSSのみ

クリックで中央拡大するライトボックス風表示

サムネイルをクリックするとプレビュー枠の内側で画像が中央に拡大表示されるライトボックス風演出です。WordPressの作品ギャラリーで、別ページに遷移せずに画像を大きく見せたい場合に便利です。

clickcssoverlay

プレビュー

ソースコード

HTML

<input type="checkbox" id="d07-11-04-toggle" class="d07-11-04-toggle">
        <label for="d07-11-04-toggle" class="d07-11-04-thumb">
          <span class="d07-11-04-plus">+</span>
        </label>
        <label for="d07-11-04-toggle" class="d07-11-04-overlay">
          <div class="d07-11-04-big"></div>
        </label>

CSS

.d07-11-04-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
        .d07-11-04-thumb{position:relative;display:block;width:160px;height:120px;border-radius:10px;cursor:zoom-in;background:linear-gradient(135deg,#f6d365,#fda085);box-shadow:0 4px 14px rgba(0,0,0,.15)}
        .d07-11-04-plus{position:absolute;right:8px;bottom:8px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.9);color:#333;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
        .d07-11-04-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(20,20,30,0);opacity:0;pointer-events:none;transition:opacity .3s ease,background .3s ease;cursor:zoom-out}
        .d07-11-04-big{width:65%;height:65%;border-radius:14px;background:linear-gradient(135deg,#f6d365,#fda085);transform:scale(.7);transition:transform .35s ease;box-shadow:0 10px 30px rgba(0,0,0,.3)}
        .d07-11-04-toggle:checked ~ .d07-11-04-overlay{background:rgba(20,20,30,.55);opacity:1;pointer-events:auto}
        .d07-11-04-toggle:checked ~ .d07-11-04-overlay .d07-11-04-big{transform:scale(1)}

クラス名 .d07-11-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。