Live Demo
マウスを乗せるかTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1018" 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%23f7d5b2%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23c87868%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%23fff0b1%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%23455e76%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%23455e76%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%23455e76%22%20opacity%3D%22.45%22%2F%3E%3C%2Fsvg%3E" alt="山並みのサンプル画像"><span class="tbx-1018__badge">Portfolio</span></button>
CSS
.tbx-1018{position:relative;display:block;width:min(230px,100%);aspect-ratio:1.65;overflow:hidden;border:0;border-radius:7px;padding:0;background:#d5dde6;box-shadow:0 8px 20px #15364b1a;cursor:pointer}
.tbx-1018 img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .45s ease}
.tbx-1018__badge{position:absolute;left:11px;bottom:11px;padding:5px 8px;background:#fff;color:#233e53;font:650 11px/1.2 system-ui,sans-serif;border-radius:3px}
.tbx-1018:is(:hover,:focus-visible) img{filter:grayscale(0)}
.tbx-1018:focus-visible{outline:3px solid #7b65db;outline-offset:4px}
@media(hover:none){.tbx-1018 img{filter:grayscale(0)}}
@media(prefers-reduced-motion:reduce){.tbx-1018 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 に対応。