Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1138" href="#staff"><span class="tbx-1138__orb" aria-hidden="true"></span><span class="tbx-1138__blocks" aria-hidden="true"></span><span class="tbx-1138__person" aria-hidden="true"><i class="tbx-1138__head"></i><i class="tbx-1138__body"></i></span><span class="tbx-1138__text"><b>CREATIVE DIRECTOR</b><strong>OUR TEAM ↗</strong></span></a>CSS
.tbx-1138{position:relative;display:block;width:min(275px,100%);height:194px;background:#d8e7e8;overflow:hidden;border-radius:12px;text-decoration:none;font-family:system-ui,sans-serif;color:#173d4b;isolation:isolate}
.tbx-1138__orb{position:absolute;width:160px;height:160px;top:-40px;left:-42px;border-radius:50%;background:#e4ae82;transition:transform .56s}.tbx-1138__blocks{position:absolute;right:-40px;bottom:15px;width:165px;height:117px;background:repeating-linear-gradient(135deg,transparent 0 13px,#7ca8af77 13px 16px);clip-path:polygon(15% 0,100% 0,100% 100%,0 100%);transition:transform .56s}
.tbx-1138__person{position:absolute;top:18px;left:84px;width:122px;height:182px;transition:transform .56s cubic-bezier(.16,.8,.22,1);filter:drop-shadow(0 6px 3px #1a42442b)}
.tbx-1138__head{position:absolute;top:0;left:43px;width:53px;height:69px;border-radius:47% 43% 47% 50%;background:#ad684f;border:8px solid #263845;box-sizing:border-box;z-index:2}.tbx-1138__head:after{content:"";position:absolute;bottom:-9px;left:13px;width:17px;height:17px;background:#ad684f}
.tbx-1138__body{position:absolute;left:0;right:0;bottom:-15px;height:133px;background:#3b6570;clip-path:polygon(34% 0,59% 0,87% 15%,100% 100%,0 100%,13% 15%)}
.tbx-1138__text{position:absolute;bottom:12px;left:12px;right:12px;display:flex;flex-direction:column;gap:4px;z-index:3;padding:8px 11px;background:#fffffff0;border-radius:6px}
.tbx-1138__text b{font-size:9px;letter-spacing:.11em;color:#6c8490}.tbx-1138__text strong{font-size:13px}.tbx-1138:is(:hover,:focus-visible) .tbx-1138__person{transform:translate(9px,-11px) scale(1.09)}.tbx-1138:is(:hover,:focus-visible) .tbx-1138__orb{transform:translate(-20px,15px) scale(1.13)}.tbx-1138:is(:hover,:focus-visible) .tbx-1138__blocks{transform:translate(16px,-9px)}
.tbx-1138:focus-visible{outline:3px solid #b97554;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1138, .tbx-1138 *, .tbx-1138::before, .tbx-1138::after, .tbx-1138 *::before, .tbx-1138 *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Team / Portfolio
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバー効果に依存しない導線を維持してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。