Live Demo
マウスを乗せるかTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<button class="tbx-1020" type="button"><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%23b6c9fa%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23556dab%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%23fff1c3%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%23213d60%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%23213d60%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%23213d60%22%20opacity%3D%22.45%22%2F%3E%3C%2Fsvg%3E" alt="山並みのサンプル画像"><span class="tbx-1020__layer"><span class="tbx-1020__title">Landscape Collection</span><span class="tbx-1020__small">作品を見る ↗</span></span></button>
CSS
.tbx-1020{position:relative;display:block;width:min(230px,100%);aspect-ratio:1.65;overflow:hidden;padding:0;border:0;border-radius:7px;background:#bfcfe0;text-align:left;color:#fff;cursor:pointer}
.tbx-1020 img{display:block;width:100%;height:100%;object-fit:cover}
.tbx-1020__layer{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:7px;padding:17px;background:linear-gradient(180deg,#12294408,#09243bdc);opacity:0;transition:opacity .3s ease}
.tbx-1020__title{font:750 13px/1.3 system-ui,sans-serif}.tbx-1020__small{font:500 11px/1.3 system-ui,sans-serif}
.tbx-1020:is(:hover,:focus-visible) .tbx-1020__layer{opacity:1}
.tbx-1020:focus-visible{outline:3px solid #7b65db;outline-offset:4px}
@media(hover:none){.tbx-1020__layer{opacity:1}}
@media(prefers-reduced-motion:reduce){.tbx-1020__layer{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
施工事例・作品集・商品カテゴリー画像
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではhoverがないため、操作可能要素のフォーカス状態も考慮してください。
Browser：Chrome・Firefox・Safariなどの最新ブラウザで利用可能なCSSを使用。
Reduced Motion：prefers-reduced-motion: reduce に対応。