パーツ番号 02-17-18 ・ CSSのみ

ホバーラベルスライド見出しセット

set をホバーすると、各レベルの上に添えた英字ラベルが下から時間差でスライドインする。ラベルが階層順に立ち上がってくるので、コーポレートサイトの特徴紹介ブロックに軽い遊びを加えられる。

hovercss

プレビュー

ソースコード

HTML

<div class="set">
          <p class="lv2">私たちの強み</p>
          <p class="lv3">技術力について</p>
          <p class="lv4">対応可能な言語</p>
        </div>

CSS

.d02-17-18 .set{ width:100%; display:flex; flex-direction:column; gap:20px; }
        .d02-17-18 .lv2,.d02-17-18 .lv3,.d02-17-18 .lv4{ margin:0; position:relative; padding-top:20px; }
        .d02-17-18 .lv2::before,.d02-17-18 .lv3::before,.d02-17-18 .lv4::before{ position:absolute; top:0; left:0; font-size:10px; font-weight:700; letter-spacing:.16em; color:#818cf8; text-transform:uppercase; opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1); }
        .d02-17-18 .lv2::before{ content:"STRENGTH"; }
        .d02-17-18 .lv3::before{ content:"TECH"; }
        .d02-17-18 .lv4::before{ content:"LANGUAGE"; }
        .d02-17-18 .lv2{ font-size:23px; font-weight:800; color:#1e1b4b; }
        .d02-17-18 .lv3{ font-size:18px; font-weight:700; color:#312e81; padding-left:14px; }
        .d02-17-18 .lv4{ font-size:14px; font-weight:700; color:#4338ca; padding-left:28px; }
        .d02-17-18 .set:hover .lv2::before{ opacity:1; transform:translateY(0); }
        .d02-17-18 .set:hover .lv3::before{ opacity:1; transform:translateY(0); transition-delay:.12s; }
        .d02-17-18 .set:hover .lv4::before{ opacity:1; transform:translateY(0); transition-delay:.24s; }

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