パーツ番号 01-13-01 ・ CSSのみ

ホバー連動スプリットヒーロー

左右2分割のヒーローで、ホバーした側の面積が広がり境界線が動きます。制作会社やサービスサイトのトップで2つの訴求を並列に見せたい場合に使えます。

hovercss

プレビュー

ソースコード

HTML

<div class="d01-13-01-wrap">
          <div class="d01-13-01-pane d01-13-01-a"><span>デザイン</span></div>
          <div class="d01-13-01-pane d01-13-01-b"><span>開発</span></div>
        </div>

CSS

.prev.d01-13-01{padding:0}
        .d01-13-01-wrap{position:relative;width:100%;height:230px;display:flex;overflow:hidden}
        .d01-13-01-pane{flex:1;display:flex;align-items:center;justify-content:center;transition:flex .5s cubic-bezier(.2,.7,.3,1)}
        .d01-13-01-pane span{color:#fff;font-weight:800;font-size:16px;letter-spacing:.06em;text-shadow:0 2px 8px rgba(0,0,0,.25)}
        .d01-13-01-a{background:linear-gradient(135deg,#6366f1,#4338ca);border-right:3px solid rgba(255,255,255,.85)}
        .d01-13-01-b{background:linear-gradient(135deg,#0891b2,#0e7490)}
        .d01-13-01-a:hover{flex:1.9}
        .d01-13-01-wrap:has(.d01-13-01-a:hover) .d01-13-01-b{flex:.5}
        .d01-13-01-b:hover{flex:1.9}
        .d01-13-01-wrap:has(.d01-13-01-b:hover) .d01-13-01-a{flex:.5}

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