Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1113" href="#photos" aria-label="写真作品を見る"><span class="tbx-1113__photo" aria-hidden="true"><i class="tbx-1113__sun"></i><i class="tbx-1113__hill"></i><i class="tbx-1113__hill2"></i></span><span class="tbx-1113__film" aria-hidden="true"><span>● ● ● ● ● ● ● ●</span><span>● ● ● ● ● ● ● ●</span></span><span class="tbx-1113__caption">FRAME 026 <b>↗</b></span></a>
CSS
.tbx-1113{display:block;position:relative;width:min(287px,100%);height:185px;overflow:hidden;border-radius:4px;background:#202935;color:#fff;text-decoration:none;font-family:system-ui,sans-serif;padding:8px;isolation:isolate}
.tbx-1113__photo{position:absolute;inset:8px;background:linear-gradient(175deg,#81c6c5 0%,#567e92 65%,#2f4b63 65%);transition:inset .45s,filter .45s;overflow:hidden}.tbx-1113__sun{position:absolute;top:23px;left:57%;width:45px;height:45px;border-radius:50%;background:#f8dea2}.tbx-1113__hill{position:absolute;bottom:-38px;left:-14%;width:85%;height:100px;transform:rotate(-15deg);background:#466b73}.tbx-1113__hill2{position:absolute;bottom:-49px;right:-13%;width:78%;height:119px;transform:rotate(19deg);background:#284c60}
.tbx-1113__film{position:absolute;inset:2px 5px;display:flex;justify-content:space-between;flex-direction:column;color:#f2ecdb;line-height:1;font-size:12px;letter-spacing:.1em;opacity:0;transition:opacity .36s;pointer-events:none}.tbx-1113__caption{position:absolute;bottom:9px;left:9px;right:9px;display:flex;justify-content:space-between;background:#172731dd;padding:9px 12px;letter-spacing:.12em;font-size:10px;font-weight:750;transform:translateY(120%);transition:transform .42s}.tbx-1113__caption b{font-size:15px;font-weight:400}
.tbx-1113:is(:hover,:focus-visible) .tbx-1113__photo{inset:20px 8px;filter:saturate(1.15)}.tbx-1113:is(:hover,:focus-visible) .tbx-1113__film{opacity:1}.tbx-1113:is(:hover,:focus-visible) .tbx-1113__caption{transform:translateY(0)}
.tbx-1113:focus-visible{outline:3px solid #e2c59a;outline-offset:4px}@media(prefers-reduced-motion:reduce){.tbx-1113 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Photography / Gallery
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。