Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1270"><div class="triptych" aria-label="ギャラリーの3つの作品"><button type="button" class="pane one" aria-label="作品1：山"><span class="art" aria-hidden="true">△<em>01</em></span></button><button type="button" class="pane two" aria-label="作品2：建築"><span class="art" aria-hidden="true">▥<em>02</em></span></button><button type="button" class="pane three" aria-label="作品3：海"><span class="art" aria-hidden="true">≈<em>03</em></span></button></div><p>SELECT A FRAME</p></div>CSS
.tbx-1270{width:100%;min-height:218px;box-sizing:border-box;padding:20px 18px;display:flex;justify-content:center;align-items:center;flex-direction:column;gap:12px;background:#1c2733;color:white;font-family:system-ui,sans-serif}.tbx-1270 *{box-sizing:border-box}
.tbx-1270 .triptych{width:min(340px,100%);height:153px;display:flex;gap:5px;overflow:hidden}.tbx-1270 .pane{min-width:0;flex:1;border:0;cursor:pointer;position:relative;overflow:hidden;display:grid;place-items:center;transition:flex .43s ease,filter .43s;padding:0;color:white}
.tbx-1270 .one{background:linear-gradient(145deg,#b6a7a2,#556c6c 70%)}.tbx-1270 .two{background:linear-gradient(145deg,#c5b98c,#8a7259 68%)}.tbx-1270 .three{background:linear-gradient(145deg,#6ea6aa,#22576e 75%)}
.tbx-1270 .pane:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#09131ca3,transparent 56%);pointer-events:none}
.tbx-1270 .art{font:300 54px Georgia,serif;position:relative;z-index:1;transition:transform .4s}.tbx-1270 .art em{position:absolute;left:50%;bottom:-21px;transform:translateX(-50%);font:600 9px system-ui;letter-spacing:.13em}
.tbx-1270 .triptych:has(.pane:is(:hover,:focus-visible)) .pane:not(:hover,:focus-visible){filter:brightness(.72)}.tbx-1270 .pane:is(:hover,:focus-visible){flex:2.3}.tbx-1270 .pane:is(:hover,:focus-visible) .art{transform:scale(1.12)}.tbx-1270 p{font-size:9px;letter-spacing:.18em;opacity:.75;margin:0}
.tbx-1270 :focus-visible{outline:3px solid #ffd290;outline-offset:-3px}
@media(max-width:360px){.tbx-1270 .triptych{height:130px}.tbx-1270 .art{font-size:42px}}
@media(prefers-reduced-motion:reduce){.tbx-1270 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Gallery, Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーができないため、フォーカス・タッチ操作を確認してください。
Browser：現行版のChrome・Safari・Firefox・Edgeを推奨。:has()を利用する素材は古いブラウザでは挙動が異なる場合があります。
Reduced Motion：prefers-reduced-motion: reduce 対応。