Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1090" href="#collection" aria-label="家具作品 Chair No.6 の詳細を見る"><span class="tbx-1090__photo" aria-hidden="true"><i class="tbx-1090__chair"></i><i class="tbx-1090__seat"></i></span><span class="tbx-1090__rail"><small>COLLECTION / 006</small><strong>CHAIR NO.6</strong><span aria-hidden="true">↗</span></span><span class="tbx-1090__number" aria-hidden="true">06</span></a>
CSS
.tbx-1090{position:relative;display:block;width:min(280px,100%);height:190px;overflow:hidden;color:#f3eee7;text-decoration:none;background:#d2cab9;font-family:system-ui,sans-serif}
.tbx-1090__photo{position:absolute;inset:0;background:linear-gradient(130deg,#c1bcae 0,#ebe0cb 61%,#b1b2a6);transition:transform .42s}.tbx-1090__photo:before{position:absolute;content:"";left:0;right:0;bottom:22px;height:1px;background:#a8a494}
.tbx-1090__chair{position:absolute;width:83px;height:89px;left:90px;top:34px;border:14px solid #8a593f;border-bottom:0;border-radius:40% 45% 0 0;transform:rotate(-7deg)}.tbx-1090__seat{position:absolute;width:124px;height:17px;left:75px;top:113px;background:#825039;box-shadow:18px 43px 0 -6px #6e483a,-41px 49px 0 -6px #6e483a;transform:skewX(-9deg)}
.tbx-1090__rail{position:absolute;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:14px 7px;background:#173e4c;width:52px;transform:translateX(100%);transition:transform .42s cubic-bezier(.22,1,.36,1)}.tbx-1090__rail small{font-size:7px;letter-spacing:.12em;writing-mode:vertical-rl}.tbx-1090__rail strong{font-size:9px;writing-mode:vertical-rl;letter-spacing:.12em}.tbx-1090__rail span{font-size:19px}
.tbx-1090__number{position:absolute;left:15px;top:12px;color:#f8f6ee;font-size:24px;font-weight:750;text-shadow:0 1px 4px #38423765}
.tbx-1090:is(:hover,:focus-visible) .tbx-1090__rail{transform:translateX(0)}.tbx-1090:is(:hover,:focus-visible) .tbx-1090__photo{transform:translateX(-10px)}
.tbx-1090:focus-visible{outline:3px solid #deab77;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1090 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Portfolio / Gallery
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では本来のリンク・操作を優先し、必要な情報は通常状態でも理解できるようにしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。