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

アバターグループ(重なり)

複数のアバターが少し重なって並び、ホバーで扇状に広がります。「+8」で総人数を表示。チーム規模を示すプロフィール欄に。

hovercss

プレビュー

ソースコード

HTML

<div class="d06-03-08-group">
          <span class="d06-03-08-ava" style="--i:0;background:linear-gradient(135deg,#6a8dff,#9b6bff)">AK</span>
          <span class="d06-03-08-ava" style="--i:1;background:linear-gradient(135deg,#3ec6b0,#5ac8fa)">MT</span>
          <span class="d06-03-08-ava" style="--i:2;background:linear-gradient(135deg,#ff8fb1,#a86bff)">YS</span>
          <span class="d06-03-08-ava" style="--i:3;background:linear-gradient(135deg,#ffb347,#ff7e5f)">RN</span>
          <span class="d06-03-08-ava d06-03-08-more" style="--i:4">+8</span>
        </div>

CSS

.d06-03-08-group{display:flex}
        .d06-03-08-ava{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;border:3px solid #fff;margin-left:-16px;transition:margin-left .35s cubic-bezier(.2,.8,.2,1),transform .35s}
        .d06-03-08-ava:first-child{margin-left:0}
        .d06-03-08-more{background:#c3cbe0;color:#3a4666}
        .d06-03-08-group:hover .d06-03-08-ava{margin-left:6px;transform:translateY(-4px)}
        .d06-03-08-group:hover .d06-03-08-ava:first-child{margin-left:0}

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