Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1076" href="#gallery" aria-label="海辺の展示作品を見る"><span class="tbx-1076__visual" aria-hidden="true"><span class="tbx-1076__sun"></span><span class="tbx-1076__horizon"></span><span class="tbx-1076__boat"></span></span><span class="tbx-1076__label"><small>COLLECTION / 08</small><b>SEA STUDIES</b><span>View the gallery ↗</span></span></a>
CSS
.tbx-1076{position:relative;display:block;width:min(282px,100%);height:186px;overflow:hidden;background:#e9f0e9;text-decoration:none;color:white;font:12px/1.4 system-ui,sans-serif}
.tbx-1076__visual{position:absolute;inset:0;background:linear-gradient(#a8c8c9 0 53%,#548e9c 54% 70%,#285e75 71%);transition:inset .38s,filter .38s}
.tbx-1076__sun{position:absolute;width:47px;height:47px;top:25px;right:55px;background:#ffd99a;border-radius:50%}
.tbx-1076__horizon{position:absolute;left:0;right:0;top:56%;height:2px;background:#e3e9d8aa}.tbx-1076__boat{position:absolute;bottom:30px;left:72px;width:122px;height:18px;background:#1c475d;clip-path:polygon(0 0,100% 0,81% 100%,14% 100%)}
.tbx-1076__boat:before{content:"";position:absolute;bottom:12px;left:50px;border:20px solid transparent;border-right:2px solid #eee}
.tbx-1076__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;background:#0d273865;opacity:0;transition:opacity .32s}
.tbx-1076__label small{font-size:9px;letter-spacing:.13em}.tbx-1076__label b{font-size:21px;letter-spacing:.07em}.tbx-1076__label span{font-size:10px;border-bottom:1px solid currentColor;padding-bottom:3px}
.tbx-1076:is(:hover,:focus-visible) .tbx-1076__visual{inset:13px;filter:saturate(.72)}.tbx-1076:is(:hover,:focus-visible) .tbx-1076__label{opacity:1;inset:13px}
.tbx-1076:focus-visible{outline:3px solid #ceac74;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.tbx-1076 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Gallery / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末にはリンクの本来の役割を残し、必要な説明は通常時にも読める形にしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。