Live Demo
マウスを乗せるかTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1019" type="button" aria-label="ギャラリーを開く"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20420%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22sky%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23a7e8dd%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%232b9a9b%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22640%22%20height%3D%22420%22%20fill%3D%22url%28%23sky%29%22%2F%3E%3Ccircle%20cx%3D%22472%22%20cy%3D%22103%22%20r%3D%2247%22%20fill%3D%22%23ffe6b2%22%2F%3E%3Cpath%20d%3D%22M0%20302%20L125%20158%20L258%20293%20L345%20196%20L480%20337%20L640%20220%20L640%20420%20L0%20420Z%22%20fill%3D%22%2317485a%22%20opacity%3D%22.78%22%2F%3E%3Cpath%20d%3D%22M0%20391%20L176%20259%20L337%20381%20L446%20303%20L640%20404%20L640%20420%20L0%20420Z%22%20fill%3D%22%2317485a%22%20opacity%3D%22.55%22%2F%3E%3Cpath%20d%3D%22M0%20417%20C120%20352%20205%20387%20295%20390%20S482%20348%20640%20385%20L640%20420%20L0%20420Z%22%20fill%3D%22%2317485a%22%20opacity%3D%22.45%22%2F%3E%3C%2Fsvg%3E" alt="山並みのサンプル画像"></button>
CSS
.tbx-1019{display:block;width:min(230px,100%);aspect-ratio:1.65;overflow:hidden;padding:0;border:0;border-radius:7px;background:#e2eff0;box-shadow:0 8px 20px #15364b1a;cursor:pointer}
.tbx-1019 img{display:block;width:122%;height:100%;max-width:none;object-fit:cover;transform:translateX(-2%);transition:transform .65s cubic-bezier(.2,.75,.25,1)}
.tbx-1019:is(:hover,:focus-visible) img{transform:translateX(-16%)}
.tbx-1019:focus-visible{outline:3px solid #7b65db;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tbx-1019 img{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
建築・不動産・宿泊施設の写真一覧
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではhoverがないため、操作可能要素のフォーカス状態も考慮してください。
Browser：Chrome・Firefox・Safariなどの最新ブラウザで利用可能なCSSを使用。
Reduced Motion：prefers-reduced-motion: reduce に対応。