Live Demo
マウスを乗せるか、Tabキーで操作して変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1069" role="group" aria-label="ギャラリーサンプル"><figure tabindex="0"><div class="tbx-1069__art tbx-1069__art--a"><span aria-hidden="true">◒</span></div><figcaption>LANDSCAPE</figcaption></figure><figure tabindex="0"><div class="tbx-1069__art tbx-1069__art--b"><span aria-hidden="true">◆</span></div><figcaption>ARCHITECTURE</figcaption></figure><figure tabindex="0"><div class="tbx-1069__art tbx-1069__art--c"><span aria-hidden="true">◯</span></div><figcaption>DETAILS</figcaption></figure></div>
CSS
.tbx-1069{display:flex;gap:5px;width:min(300px,100%);height:174px;font:10px/1.3 system-ui,sans-serif}.tbx-1069 figure{flex:1;min-width:0;overflow:hidden;margin:0;border-radius:7px;position:relative;transition:flex .36s,filter .36s;isolation:isolate;cursor:default}.tbx-1069__art{height:100%;width:100%;display:grid;place-items:center;transition:transform .4s}.tbx-1069__art--a{background:linear-gradient(155deg,#86c4bc 0%,#558e98 49%,#244e67 50%,#23394e)}.tbx-1069__art--b{background:linear-gradient(165deg,#f1d4b5 0%,#db9e86 48%,#9b645b 49%,#684554)}.tbx-1069__art--c{background:linear-gradient(165deg,#95b5c9 0%,#5576a3 52%,#283b60 53%,#23304c)}.tbx-1069__art span{font-size:36px;color:#ffffffbb;filter:drop-shadow(0 6px 3px #132d4523)}.tbx-1069 figcaption{position:absolute;bottom:0;left:0;right:0;color:#fff;text-shadow:0 1px 2px #263c4899;background:linear-gradient(transparent,#182c3a99);padding:20px 7px 9px;font-size:8px;font-weight:800;letter-spacing:.05em;overflow:hidden;white-space:nowrap;opacity:.6;transition:opacity .36s}.tbx-1069 figure:is(:hover,:focus-visible){flex:2.35;filter:saturate(1.18)}.tbx-1069 figure:is(:hover,:focus-visible) .tbx-1069__art{transform:scale(1.06)}.tbx-1069 figure:is(:hover,:focus-visible) figcaption{opacity:1}.tbx-1069 figure:focus-visible{outline:3px solid #f0bb7a;outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.tbx-1069 figure,.tbx-1069__art,.tbx-1069 figcaption{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Portfolio / Gallery
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末向けにフォーカス・選択・開閉の操作を用意。ホバー専用の追加説明は常時読めるよう配慮します。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。CSS :has()を使用する素材では対応ブラウザを確認してください。
Reduced Motion：prefers-reduced-motion: reduce に対応。