Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1234"><a class="art" href="#tb1234" aria-label="風景ギャラリーを開く"><img alt="夕景の山並み" src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22520%22%20viewBox%3D%220%200%20800%20520%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22sky%22%20x2%3D%22.1%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23d48e65%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23eadcb6%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22hill%22%20x2%3D%22.6%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%239b6371%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%235a495e%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22800%22%20height%3D%22520%22%20fill%3D%22url%28%23sky%29%22%2F%3E%3Ccircle%20cx%3D%22620%22%20cy%3D%22135%22%20r%3D%2266%22%20fill%3D%22%23fff2d2%22%20opacity%3D%22.9%22%2F%3E%3Cpath%20d%3D%22M0%20425%20130%20290%20243%20385%20403%20218%20582%20414%20706%20325%20800%20405V520H0Z%22%20fill%3D%22url%28%23hill%29%22%2F%3E%3Cpath%20d%3D%22M0%20475%20190%20371%20328%20490%20485%20336%20715%20455%20800%20397V520H0Z%22%20fill%3D%22%235a495e%22%20opacity%3D%22.75%22%2F%3E%3Cpath%20d%3D%22M0%20503%20120%20445%20247%20509%20445%20430%20700%20520H0Z%22%20fill%3D%22%23a3b9aa%22%20opacity%3D%22.34%22%2F%3E%3C%2Fsvg%3E"><span class="lens" aria-hidden="true"></span><span class="info">STORY NO. 02 <b>EXPLORE ↗</b></span></a></div>CSS
.tbx-1234{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-height:212px;width:100%;max-width:100%;padding:19px;overflow:hidden;font-family:system-ui,-apple-system,sans-serif;color:#18314a;}
.tbx-1234 * ,.tbx-1234 *::before,.tbx-1234 *::after{box-sizing:border-box}
.tbx-1234{background:#eee8e2}.tbx-1234 .art{position:relative;width:min(100%,294px);height:166px;display:block;overflow:hidden;border-radius:9px;box-shadow:0 12px 22px #3e363127}.tbx-1234 img{width:100%;height:100%;object-fit:cover;display:block}.tbx-1234 .lens{position:absolute;inset:0;background:#273c4de8;clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path .6s cubic-bezier(.25,.8,.2,1),background .4s}.tbx-1234 .art:is(:hover,:focus-visible) .lens{clip-path:polygon(0 0,0 0,0 100%,0 100%);background:#273c4d45}.tbx-1234 .info{position:absolute;left:12px;bottom:12px;right:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#fff;font:750 9px system-ui;letter-spacing:.12em;text-shadow:0 1px 5px #0009}.tbx-1234 .info b{border:1px solid #fffc;padding:6px;border-radius:4px;font-size:9px}.tbx-1234 .art:focus-visible{outline:3px solid #a55136;outline-offset:5px}
@media(prefers-reduced-motion:reduce){.tbx-1234 *, .tbx-1234 *::before,.tbx-1234 *::after{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Gallery, Editorial
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーできないことがあります。必要な情報・操作はホバー以外でも利用できるようにしてください。
Browser：最新版Chrome・Safari・Firefox・Edgeをご使用ください。
Reduced Motion：prefers-reduced-motion: reduce対応。