パーツ番号 07-06-08 ・ CSSのみ

プレイリストカバーコラージュ

複数のアルバムアートが少しずつ重なって並ぶ、プレイリストのサムネイル表現です。

css

プレビュー

ソースコード

HTML

<div class="collage07-06-08">
          <div class="c07-06-08 c1_07-06-08"></div>
          <div class="c07-06-08 c2_07-06-08"></div>
          <div class="c07-06-08 c3_07-06-08"></div>
          <div class="cnt07-06-08">+12曲</div>
        </div>

CSS

.d07-06-08 .collage07-06-08{ position:relative; width:130px; height:130px; }
        .d07-06-08 .c07-06-08{ position:absolute; width:78px; height:78px; border-radius:12px; border:3px solid #fff; box-shadow:0 3px 10px rgba(0,0,0,.15); transition:transform .3s; }
        .d07-06-08 .c1_07-06-08{ top:0; left:0; background:linear-gradient(135deg,#fca5a5,#f472b6); z-index:3; }
        .d07-06-08 .c2_07-06-08{ top:14px; left:26px; background:linear-gradient(135deg,#93c5fd,#818cf8); z-index:2; }
        .d07-06-08 .c3_07-06-08{ top:28px; left:52px; background:linear-gradient(135deg,#86efac,#4ade80); z-index:1; }
        .d07-06-08 .collage07-06-08:hover .c1_07-06-08{ transform:translate(-6px,-6px) rotate(-6deg); }
        .d07-06-08 .collage07-06-08:hover .c2_07-06-08{ transform:translate(0,-3px); }
        .d07-06-08 .collage07-06-08:hover .c3_07-06-08{ transform:translate(6px,4px) rotate(6deg); }
        .d07-06-08 .cnt07-06-08{ position:absolute; bottom:-6px; right:-6px; background:#111; color:#fff; font-size:10px; padding:3px 8px; border-radius:99px; z-index:4; }

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