Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1149" href="#gallery" aria-label="ギャラリーの作品を見る"><span class="tbx-1149__scene" aria-hidden="true"></span><span class="tbx-1149__focus" aria-hidden="true"></span><span class="tbx-1149__title">FOCUS COLLECTION <b>↗</b></span></a>CSS
.tbx-1149{position:relative;box-sizing:border-box;display:block;width:min(290px,100%);height:181px;overflow:hidden;border-radius:12px;background:#174962;color:white;text-decoration:none;font-family:system-ui,sans-serif;isolation:isolate}
.tbx-1149__scene,.tbx-1149__focus{position:absolute;inset:-5%;background:radial-gradient(circle at 74% 30%,#ffd895 0 12%,transparent 13%),linear-gradient(154deg,transparent 47%,#214e68 47% 59%,transparent 59%),linear-gradient(24deg,#145b65 34%,#37818a 34% 52%,#76b8b0 52% 75%,#bcd1be 75%);transition:filter .44s,transform .55s}
.tbx-1149__focus{clip-path:circle(0% at 50% 50%);filter:none;transform:scale(1.05);transition:clip-path .58s cubic-bezier(.2,.8,.2,1),transform .55s}
.tbx-1149__title{position:absolute;left:0;right:0;bottom:0;padding:20px 14px 12px;background:linear-gradient(transparent,#092f41ca);display:flex;justify-content:space-between;font-weight:800;font-size:11px;letter-spacing:.11em;z-index:2}
.tbx-1149:is(:hover,:focus-visible) .tbx-1149__scene{filter:blur(7px) brightness(.7);transform:scale(1.07)}.tbx-1149:is(:hover,:focus-visible) .tbx-1149__focus{clip-path:circle(33% at 50% 50%);transform:scale(1)}
.tbx-1149:focus-visible{outline:3px solid #e6b97a;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1149, .tbx-1149 *, .tbx-1149::before, .tbx-1149::after, .tbx-1149 *::before, .tbx-1149 *::after { animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Gallery / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。