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

チームメンバーカード

アバターと氏名・肩書を並べたカード。ホバーでSNSアイコンが下からスライドインします。WordPressの会社案内やスタッフ紹介ページに。

hovercss

プレビュー

ソースコード

HTML

<div class="d06-03-01-card">
          <div class="d06-03-01-ava">TS</div>
          <div class="d06-03-01-name">高橋 誠</div>
          <div class="d06-03-01-role">代表取締役</div>
          <div class="d06-03-01-sns">
            <a href="#" aria-label="X"><svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M18.9 2H22l-7.3 8.3L23 22h-6.6l-5.2-6.8L5.3 22H2l7.8-8.9L1.5 2h6.8l4.7 6.2L18.9 2Zm-1.2 18h1.7L7.1 3.8H5.3L17.7 20Z"/></svg></a>
            <a href="#" aria-label="Facebook"><svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M13 22v-8h2.7l.4-3H13V9c0-.9.3-1.5 1.6-1.5H16V4.9c-.3 0-1.2-.1-2.3-.1-2.3 0-3.7 1.4-3.7 3.9V11H7.5v3H10v8h3Z"/></svg></a>
            <a href="#" aria-label="Mail"><svg viewBox="0 0 24 24" width="18" height="18"><path fill="currentColor" d="M2 5h20v14H2V5Zm2 2v.4l8 5 8-5V7H4Zm16 2.6-8 5-8-5V17h16V9.6Z"/></svg></a>
          </div>
        </div>

CSS

.d06-03-01{background:#f4f6fb}
        .d06-03-01-card{width:180px;background:#fff;border-radius:16px;padding:26px 20px 20px;text-align:center;box-shadow:0 8px 24px rgba(40,60,110,.12);overflow:hidden}
        .d06-03-01-ava{width:74px;height:74px;border-radius:50%;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:24px;background:linear-gradient(135deg,#6a8dff,#9b6bff)}
        .d06-03-01-name{font-weight:700;color:#243053;font-size:16px}
        .d06-03-01-role{color:#8590ad;font-size:12px;margin-top:3px}
        .d06-03-01-sns{display:flex;justify-content:center;gap:12px;margin-top:16px;transform:translateY(140%);opacity:0;transition:transform .38s cubic-bezier(.2,.8,.2,1),opacity .3s}
        .d06-03-01-sns a{color:#6a8dff;display:flex}
        .d06-03-01-sns a:hover{color:#9b6bff}
        .d06-03-01-card:hover .d06-03-01-sns{transform:translateY(0);opacity:1}

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