Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1150" href="#project" aria-label="建築作品の詳細を見る"><span class="tbx-1150__canvas" aria-hidden="true"></span><span class="tbx-1150__grid" aria-hidden="true"></span><span class="tbx-1150__info"><small>FRAME 01 / ARCHITECTURE</small><strong>URBAN FORM</strong></span><span class="tbx-1150__coords" aria-hidden="true">X 24.6 / Y 07.2</span></a>CSS
.tbx-1150{position:relative;display:block;width:min(296px,100%);height:186px;background:#d6d0c5;border-radius:5px;overflow:hidden;color:#fff;text-decoration:none;font-family:system-ui,sans-serif;isolation:isolate}
.tbx-1150__canvas{position:absolute;inset:0;background:linear-gradient(100deg,transparent 43%,#b69e85 44% 52%,transparent 53%),linear-gradient(90deg,transparent 28%,#756c62 28% 30%,transparent 30% 68%,#756c62 68% 70%,transparent 70%),linear-gradient(180deg,#d1d6d6 0 38%,#a8aaa8 38% 42%,#baa994 42% 100%)}
.tbx-1150__canvas:before{content:"";position:absolute;inset:34% 7% 14%;background:linear-gradient(105deg,#5d6f70 0 38%,#c1baa7 38% 55%,#778c8a 55%);clip-path:polygon(0 100%,0 19%,63% 0,100% 18%,100% 100%)}
.tbx-1150__grid{position:absolute;inset:17px;border:1px solid #ffffffba;background:linear-gradient(90deg,transparent calc(50% - .5px),#ffffff99 50%,transparent calc(50% + .5px)),linear-gradient(0deg,transparent calc(50% - .5px),#ffffff99 50%,transparent calc(50% + .5px));opacity:0;transform:scale(1.1);transition:opacity .42s,transform .5s}
.tbx-1150__info{position:absolute;left:0;right:0;bottom:0;padding:19px 14px 12px;background:linear-gradient(transparent,#132c35c9);display:grid;gap:4px}.tbx-1150 small{font-size:9px;letter-spacing:.12em}.tbx-1150 strong{font-size:18px;letter-spacing:.08em}
.tbx-1150__coords{position:absolute;top:20px;right:21px;font-size:9px;letter-spacing:.1em;font-weight:800;opacity:0;transform:translateY(-8px);transition:opacity .4s,transform .4s}
.tbx-1150:is(:hover,:focus-visible) .tbx-1150__grid{opacity:1;transform:scale(1)}.tbx-1150:is(:hover,:focus-visible) .tbx-1150__coords{opacity:1;transform:translateY(0)}
.tbx-1150:focus-visible{outline:3px solid #d8ad75;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1150, .tbx-1150 *, .tbx-1150::before, .tbx-1150::after, .tbx-1150 *::before, .tbx-1150 *::after { animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Architecture / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。