Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1114" href="#collection" aria-label="作品コレクションを見る"><span class="tbx-1114__base" aria-hidden="true"></span><span class="tbx-1114__tiles" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span><span class="tbx-1114__tag">COLOR STUDY <b>↗</b></span></a>
CSS
.tbx-1114{position:relative;display:block;width:min(285px,100%);height:184px;border-radius:8px;overflow:hidden;text-decoration:none;color:#fff;background:#2a6670;font-family:system-ui,sans-serif;isolation:isolate}
.tbx-1114__base{position:absolute;inset:0;background:radial-gradient(circle at 66% 35%,#ffe0a9 0 21%,transparent 22%),linear-gradient(145deg,#9dd2c7 0 43%,#3c8c9f 43% 67%,#284f6e 67%);transform:scale(.94);transition:transform .7s}
.tbx-1114__tiles{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}.tbx-1114__tiles i{background:#e1b2a6;transition:transform .52s cubic-bezier(.2,.8,.2,1),opacity .52s}.tbx-1114__tiles i:nth-child(2n){background:#ca8c7f}.tbx-1114__tiles i:nth-child(3n){background:#f1ccae}
.tbx-1114__tiles i:nth-child(2){transition-delay:.045s}.tbx-1114__tiles i:nth-child(3){transition-delay:.09s}.tbx-1114__tiles i:nth-child(4){transition-delay:.035s}.tbx-1114__tiles i:nth-child(5){transition-delay:.13s}.tbx-1114__tiles i:nth-child(6){transition-delay:.065s}.tbx-1114__tiles i:nth-child(7){transition-delay:.09s}.tbx-1114__tiles i:nth-child(8){transition-delay:.16s}.tbx-1114__tiles i:nth-child(9){transition-delay:.115s}
.tbx-1114__tag{position:absolute;left:11px;right:11px;bottom:11px;display:flex;justify-content:space-between;font-size:10px;font-weight:750;letter-spacing:.12em;padding:9px;background:#1b3e4bbd;z-index:1}
.tbx-1114:is(:hover,:focus-visible) .tbx-1114__base{transform:scale(1)}.tbx-1114:is(:hover,:focus-visible) .tbx-1114__tiles i{transform:scale(.05) rotate(20deg);opacity:0}
.tbx-1114:focus-visible{outline:3px solid #d9a1a0;outline-offset:4px}@media(prefers-reduced-motion:reduce){.tbx-1114 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Portfolio / Gallery
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。