パーツ番号 07-01-01 ・ CSSのみ

ホバーズーム+キャプション

画像がズームしつつ暗くなり、キャプションが下から浮かび上がる定番演出。WordPressのギャラリーや施工事例一覧に最適。

gallerycssdark

プレビュー

ソースコード

HTML

<figure class="d07-01-01-fig">
          <div class="d07-01-01-img"><span>🏔️</span></div>
          <figcaption class="d07-01-01-cap">
            <strong>山岳の風景</strong>
            <small>ホバーで詳細が浮かび上がります</small>
          </figcaption>
        </figure>

CSS

.d07-01-01-fig{margin:0;width:220px;height:200px;border-radius:12px;overflow:hidden;position:relative;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.15)}
        .d07-01-01-img{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#38bdf8,#6366f1);transition:transform .5s ease,filter .5s ease}
        .d07-01-01-img span{font-size:56px}
        .d07-01-01-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff;display:flex;flex-direction:column;gap:2px;background:linear-gradient(to top,rgba(0,0,0,.65),transparent);opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .4s ease}
        .d07-01-01-cap strong{font-size:14px}
        .d07-01-01-cap small{font-size:11px;opacity:.85}
        .d07-01-01-fig:hover .d07-01-01-img{transform:scale(1.12);filter:brightness(.75)}
        .d07-01-01-fig:hover .d07-01-01-cap{opacity:1;transform:translateY(0)}

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