パーツ番号 05-01-11 ・ CSSのみ

スタック紙めくりカード

普段は重なって見える3枚のカードが、ホバーで扇状に開いて奥の情報を覗かせます。WordPressの資料ダウンロードや事例紹介の一覧に個性を添えられます。

hovercss

プレビュー

ソースコード

HTML

<div class="d05-01-11-stack">
          <div class="d05-01-11-sheet d05-01-11-s3"></div>
          <div class="d05-01-11-sheet d05-01-11-s2"></div>
          <div class="d05-01-11-sheet d05-01-11-s1">
            <h4>お知らせ資料</h4>
            <p>ホバーで重なった用紙が扇状に開きます。</p>
          </div>
        </div>

CSS

.prev.d05-01-11{background:#f1f2f5}
        .d05-01-11-stack{position:relative;width:200px;height:180px}
        .d05-01-11-sheet{
          position:absolute;inset:0;border-radius:12px;background:#fff;
          box-shadow:0 6px 16px rgba(20,25,40,.15);
          transition:transform .35s cubic-bezier(.34,1.2,.64,1);
        }
        .d05-01-11-s1{z-index:3;padding:18px;display:flex;flex-direction:column;justify-content:center}
        .d05-01-11-s2{z-index:2;background:#eef1ff}
        .d05-01-11-s3{z-index:1;background:#dfe4ff}
        .d05-01-11-stack:hover .d05-01-11-s2{transform:translate(-16px,10px) rotate(-6deg)}
        .d05-01-11-stack:hover .d05-01-11-s3{transform:translate(16px,16px) rotate(6deg)}
        .d05-01-11-s1 h4{margin:0 0 8px;font-size:14px;color:#222}
        .d05-01-11-s1 p{margin:0;font-size:11px;color:#777;line-height:1.6}

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