Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#portfolio" class="tbx-1173"><span class="tbx-1173__scene"><svg viewBox="0 0 320 195" preserveAspectRatio="xMidYMid slice" aria-hidden="true"><defs><linearGradient id="g1173" x2="0" y2="1"><stop stop-color="#efc2a0"/><stop offset="1" stop-color="#8395b3"/></linearGradient></defs><rect width="320" height="195" fill="url(#g1173)"/><circle cx="238" cy="43" r="26" fill="#fff0b7"/><path d="M0 127 54 80 96 117 151 53 215 119 265 73 320 108V195H0" fill="#6e8e99"/><path d="M0 164 77 123 141 170 222 111 320 149V195H0" fill="#335c74"/><path d="M0 181 Q90 153 174 181T320 167" fill="none" stroke="#b4d7d7" stroke-width="3"/></svg></span><span class="tbx-1173__label">COAST / 2026 <b aria-hidden="true">↗</b></span></a>
CSS
.tbx-1173{box-sizing:border-box;width:285px;max-width:100%;height:195px;position:relative;overflow:hidden;display:block;border-radius:4px;color:#fff;text-decoration:none;background:#516f85;box-shadow:0 10px 23px #1b364322}.tbx-1173__scene{position:absolute;inset:0;display:block;overflow:hidden}.tbx-1173__scene svg{height:100%;width:145%;max-width:none;display:block;transform:translateX(-6%);transition:transform .68s cubic-bezier(.17,.66,.25,1)}.tbx-1173__label{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;align-items:center;padding:28px 17px 14px;background:linear-gradient(transparent,#162f46cd);font:700 11px system-ui;letter-spacing:.15em}.tbx-1173__label b{font-size:20px;font-weight:400;transition:transform .45s}.tbx-1173:is(:hover,:focus-visible) svg{transform:translateX(-30%)}.tbx-1173:is(:hover,:focus-visible) .tbx-1173__label b{transform:translate(2px,-3px)}.tbx-1173:focus-visible{outline:3px solid #086d78;outline-offset:4px}
@media (prefers-reduced-motion: reduce) { .tbx-1173, .tbx-1173 *, .tbx-1173::before, .tbx-1173::after, .tbx-1173 *::before, .tbx-1173 *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; scroll-behavior:auto !important; } }
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Portfolio / Gallery
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーがなくても必要な情報にアクセスできる実装を推奨。
Browser：Chrome・Firefox・Safari・Edgeの現行版を想定。
Reduced Motion：prefers-reduced-motion: reduceに対応。