Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1222"><div class="tbx-1222-gallery"><a href="#demo-1222-a" class="tbx-1222-tile one"><span class="tbx-1222-scene"></span><i>01</i></a><a href="#demo-1222-b" class="tbx-1222-tile two"><span class="tbx-1222-scene"></span><i>02</i></a><a href="#demo-1222-c" class="tbx-1222-tile three"><span class="tbx-1222-scene"></span><i>03</i></a></div></div>CSS
.tbx-1222{box-sizing:border-box;max-width:100%;overflow:visible}
.tbx-1222{display:grid;place-items:center;width:100%;min-height:200px;padding:22px 15px;background:#ece7db;font-family:Arial,sans-serif}.tbx-1222 *{box-sizing:border-box}.tbx-1222-gallery{display:flex;gap:4px;width:min(100%,325px);height:138px}.tbx-1222-tile{position:relative;flex:1;overflow:hidden;isolation:isolate;outline-offset:2px;transition:flex .5s cubic-bezier(.2,.7,.2,1)}.tbx-1222-scene{position:absolute;inset:0;background:radial-gradient(circle at 74% 25%,#f5d98a 0 14px,transparent 15px),linear-gradient(151deg,transparent 0 42%,#527379 42% 62%,#1f4148 63%),linear-gradient(#c7a788,#8fbbc0);filter:grayscale(.82) saturate(.55);transform:scale(1.04);transition:filter .4s,transform .55s}.tbx-1222-tile.one .tbx-1222-scene{background-position:0 0,0 0,0 0}.tbx-1222-tile.two .tbx-1222-scene{filter:grayscale(.82) saturate(.5) hue-rotate(25deg)}.tbx-1222-tile.three .tbx-1222-scene{filter:grayscale(.82) saturate(.55) hue-rotate(-25deg)}.tbx-1222-tile i{position:absolute;left:8px;bottom:8px;color:#fff;font-style:normal;font-size:10px;letter-spacing:.12em;opacity:.55;border-left:2px solid transparent;padding-left:4px;transition:border-color .3s,opacity .3s}.tbx-1222-tile:is(:hover,:focus-visible){flex:1.8}.tbx-1222-tile:is(:hover,:focus-visible) .tbx-1222-scene{filter:grayscale(0) saturate(1.3);transform:scale(1.13)}.tbx-1222-tile:is(:hover,:focus-visible) i{opacity:1;border-color:#f7d46d}.tbx-1222-tile:focus-visible{outline:3px solid #1f4148}
@media(prefers-reduced-motion:reduce){.tbx-1222 *, .tbx-1222 *::before,.tbx-1222 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Photography, Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバー時だけに限定しないでください。
Browser：最新のChrome・Safari・Firefox・Edgeでご確認ください。
Reduced Motion：prefers-reduced-motion: reduceに対応。