Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1089" href="#work" aria-label="都市景観のギャラリーを見る"><span class="tbx-1089__landscape" aria-hidden="true"><i class="tbx-1089__sun"></i><i class="tbx-1089__tower"></i><i class="tbx-1089__tower2"></i><i class="tbx-1089__tower3"></i></span><span class="tbx-1089__shade" aria-hidden="true"></span><span class="tbx-1089__ring" aria-hidden="true"></span><span class="tbx-1089__label"><small>PROJECT / 012</small><strong>AFTER DARK</strong><span>VIEW GALLERY ↗</span></span></a>
CSS
.tbx-1089{position:relative;display:block;width:min(282px,100%);height:190px;background:#6c9aa4;color:#fff;text-decoration:none;overflow:hidden;isolation:isolate;font-family:system-ui,sans-serif}
.tbx-1089__landscape{position:absolute;inset:0;background:linear-gradient(#80aeb7 0 52%,#b5a78d 54% 56%,#526977 56%);overflow:hidden}
.tbx-1089__sun{position:absolute;width:43px;height:43px;top:24px;right:35px;background:#f9dfab;border-radius:50%}.tbx-1089__tower{position:absolute;bottom:0;left:41px;width:77px;height:110px;background:repeating-linear-gradient(0deg,#3e6274 0 8px,#587e8b 9px 14px);box-shadow:10px -14px 0 -6px #a7bbc1}.tbx-1089__tower2{position:absolute;bottom:0;left:131px;width:55px;height:145px;background:repeating-linear-gradient(0deg,#355265 0 9px,#668793 10px 16px)}.tbx-1089__tower3{position:absolute;bottom:0;right:22px;width:57px;height:90px;background:repeating-linear-gradient(0deg,#426f77 0 7px,#6d989d 8px 13px)}
.tbx-1089__shade{position:absolute;inset:0;background:#122a38c7;opacity:1;transition:opacity .5s}.tbx-1089__shade:after{content:"";position:absolute;inset:0;background:#132b38;clip-path:circle(0% at 50% 45%);transition:clip-path .6s}
.tbx-1089__ring{position:absolute;top:46%;left:50%;width:64px;height:64px;transform:translate(-50%,-50%);border:1px solid #f4d8a1;border-radius:50%;transition:width .58s,height .58s,opacity .3s;opacity:.8}
.tbx-1089__label{position:absolute;bottom:14px;left:18px;right:18px;display:flex;align-items:center;gap:8px;justify-content:space-between;flex-wrap:wrap}.tbx-1089__label small{color:#e0eacb;font-size:9px;letter-spacing:.13em}.tbx-1089__label strong{font-size:13px}.tbx-1089__label span{font-size:8px;letter-spacing:.09em;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s}
.tbx-1089:is(:hover,:focus-visible) .tbx-1089__shade{opacity:.12}.tbx-1089:is(:hover,:focus-visible) .tbx-1089__ring{width:290px;height:290px;opacity:0}.tbx-1089:is(:hover,:focus-visible) .tbx-1089__label span{opacity:1;transform:none}
.tbx-1089:focus-visible{outline:3px solid #efcf9b;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1089 *{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 に対応。