パーツ番号 05-03-04 ・ CSSのみ

番号付きプロセスカード

大きな番号入りの手順カードが横並びになり、ホバーで持ち上がります。WordPressのサービス案内やご利用の流れに使えます。

hoverautocss

プレビュー

ソースコード

HTML

<div class="d05-03-04-wrap">
          <div class="d05-03-04-card"><span class="d05-03-04-n">01</span><b>お問い合わせ</b><p>まずはご相談を</p></div>
          <div class="d05-03-04-card"><span class="d05-03-04-n">02</span><b>ヒアリング</b><p>要件を整理</p></div>
          <div class="d05-03-04-card"><span class="d05-03-04-n">03</span><b>制作</b><p>実装を進行</p></div>
        </div>

CSS

.d05-03-04-wrap{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
        .d05-03-04-card{position:relative;width:96px;padding:20px 12px 14px;background:#fff;border:1px solid #eceff4;border-radius:10px;text-align:center;box-shadow:0 4px 12px rgba(30,50,90,.06);transition:transform .25s ease,box-shadow .25s ease}
        .d05-03-04-card:hover{transform:translateY(-8px);box-shadow:0 14px 26px rgba(79,124,255,.18)}
        .d05-03-04-n{display:block;font-size:26px;font-weight:800;color:#4f7cff;line-height:1;margin-bottom:8px;letter-spacing:-1px}
        .d05-03-04-card b{display:block;font-size:13px;color:#1e293b;margin-bottom:3px}
        .d05-03-04-card p{margin:0;font-size:10px;color:#94a3b8}

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