Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1075" href="#work" aria-label="建築作品の詳細を見る"><span class="tbx-1075__art" aria-hidden="true"><i></i><b></b></span><span class="tbx-1075__shade" aria-hidden="true"></span><span class="tbx-1075__info"><small>ARCHITECTURE / 2026</small><strong>Residence 04</strong><em>VIEW CASE ↗</em></span></a>
CSS
.tbx-1075{position:relative;display:block;width:min(276px,100%);height:184px;overflow:hidden;border-radius:8px;text-decoration:none;background:#d0d8d0;isolation:isolate;font:12px/1.3 system-ui,sans-serif}
.tbx-1075__art{position:absolute;inset:0;background:linear-gradient(160deg,#e5cfab 0 42%,#a4b2a9 43% 65%,#657d77 66%);overflow:hidden}
.tbx-1075__art i{position:absolute;left:46px;top:35px;width:180px;height:139px;background:linear-gradient(90deg,#f0eee4 0 24%,#c2c9ba 25% 29%,#e9e8df 30% 75%,#bdc3b5 76%);box-shadow:8px 9px 0 #445d585e;transform:skewY(-8deg)}
.tbx-1075__art b{position:absolute;left:78px;top:77px;width:73px;height:50px;border:8px solid #677d7b;background:#a9bdc4;box-shadow:80px 10px 0 -8px #526c66}
.tbx-1075__shade{position:absolute;inset:0;background:linear-gradient(135deg,#203b4be9,#0e2838dc);clip-path:polygon(0 0,0 0,0 100%,0 100%);transition:clip-path .55s cubic-bezier(.22,1,.36,1)}
.tbx-1075__info{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:end;gap:8px;color:#fff;padding:20px 22px;opacity:0;transform:translateY(12px);transition:opacity .25s,transform .4s}
.tbx-1075__info small{font-size:9px;letter-spacing:.14em;color:#b7dfd5}.tbx-1075__info strong{font-size:20px}.tbx-1075__info em{font-size:10px;font-style:normal;letter-spacing:.12em}
.tbx-1075:is(:hover,:focus-visible) .tbx-1075__shade{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}.tbx-1075:is(:hover,:focus-visible) .tbx-1075__info{opacity:1;transform:translateY(0)}.tbx-1075:focus-visible{outline:3px solid #d9ab77;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.tbx-1075 *{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 に対応。