Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1102" href="#portrait" aria-label="ポートレート作品を見る"><span class="tbx-1102__scene" aria-hidden="true"><i class="tbx-1102__window"></i><i class="tbx-1102__head"></i><i class="tbx-1102__body"></i></span><span class="tbx-1102__tint" aria-hidden="true"></span><span class="tbx-1102__text"><small>PORTRAITS — 2026</small><strong>Portrait Study</strong></span></a>
CSS
.tbx-1102{display:block;width:min(280px,100%);height:184px;overflow:hidden;position:relative;color:#fff;text-decoration:none;border-radius:7px;font-family:system-ui,sans-serif;background:#3a7779;isolation:isolate}
.tbx-1102__scene{position:absolute;inset:0;background:linear-gradient(128deg,#97d0c0 0 36%,#3b91a1 36% 56%,#507a8f 56%);transition:filter .55s,transform .55s}
.tbx-1102__window{position:absolute;top:16px;left:14px;width:90px;height:120px;border:6px solid #e5e6c3;border-radius:50% 50% 0 0;opacity:.75}.tbx-1102__head{position:absolute;top:34px;right:62px;width:68px;height:72px;border-radius:55% 50% 47% 55%;background:#e6a57e;box-shadow:8px -7px 0 #244f63}.tbx-1102__body{position:absolute;top:93px;right:22px;width:145px;height:125px;border-radius:46% 35% 0 0;background:#233e5a}
.tbx-1102__tint{position:absolute;inset:0;background:linear-gradient(112deg,#d67f51b9,#a84d65aa);mix-blend-mode:color;opacity:.88;transition:opacity .65s,clip-path .65s;clip-path:inset(0 0 0 0)}
.tbx-1102__text{position:absolute;left:0;bottom:0;right:0;padding:23px 13px 13px;display:flex;flex-direction:column;gap:5px;background:linear-gradient(transparent,#102c3a98)}.tbx-1102__text small{letter-spacing:.12em;font-size:9px}.tbx-1102__text strong{font:700 17px Georgia,serif}
.tbx-1102:is(:hover,:focus-visible) .tbx-1102__tint{opacity:0;clip-path:inset(0 100% 0 0)}.tbx-1102:is(:hover,:focus-visible) .tbx-1102__scene{transform:scale(1.045)}
.tbx-1102:focus-visible{outline:3px solid #e9c08f;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1102 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Portfolio / Photography
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。