Live Demo
マウスを乗せるか、Tabキーでフォーカスして動きを確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a class="tbx-1197" href="#gallery" aria-label="海辺の風景作品を見る"><span class="tbx-1197__slice tbx-1197__slice--one"><svg viewBox="0 0 320 190" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs><linearGradient id="sky1197" x2="0" y2="1"><stop stop-color="#91c5ca"/><stop offset="1" stop-color="#e8dbb0"/></linearGradient></defs><rect width="320" height="190" fill="url(#sky1197)"/><circle cx="228" cy="55" r="29" fill="#ffe7ab"/><path d="M0 131 60 63 125 133 167 84 222 144 271 100 320 147V190H0" fill="#64899a"/><path d="M0 162 77 113 148 178 220 118 320 171V190H0" fill="#34556f"/><path d="M0 181Q76 153 155 174T320 165V190H0" fill="#183e58"/></svg></span><span class="tbx-1197__slice tbx-1197__slice--two"><svg viewBox="0 0 320 190" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs><linearGradient id="sky1197b" x2="0" y2="1"><stop stop-color="#91c5ca"/><stop offset="1" stop-color="#e8dbb0"/></linearGradient></defs><rect width="320" height="190" fill="url(#sky1197b)"/><circle cx="228" cy="55" r="29" fill="#ffe7ab"/><path d="M0 131 60 63 125 133 167 84 222 144 271 100 320 147V190H0" fill="#64899a"/><path d="M0 162 77 113 148 178 220 118 320 171V190H0" fill="#34556f"/><path d="M0 181Q76 153 155 174T320 165V190H0" fill="#183e58"/></svg></span><span class="tbx-1197__slice tbx-1197__slice--three"><svg viewBox="0 0 320 190" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs><linearGradient id="sky1197c" x2="0" y2="1"><stop stop-color="#91c5ca"/><stop offset="1" stop-color="#e8dbb0"/></linearGradient></defs><rect width="320" height="190" fill="url(#sky1197c)"/><circle cx="228" cy="55" r="29" fill="#ffe7ab"/><path d="M0 131 60 63 125 133 167 84 222 144 271 100 320 147V190H0" fill="#64899a"/><path d="M0 162 77 113 148 178 220 118 320 171V190H0" fill="#34556f"/><path d="M0 181Q76 153 155 174T320 165V190H0" fill="#183e58"/></svg></span><span class="tbx-1197__label">COAST / 03 <b aria-hidden="true">↗</b></span></a>
CSS
.tbx-1197{display:flex;position:relative;width:270px;max-width:100%;height:174px;overflow:hidden;background:#b1caca;border:5px solid white;box-sizing:border-box;box-shadow:0 8px 18px #1236482f;text-decoration:none;isolation:isolate}.tbx-1197__slice{position:absolute;top:0;bottom:0;width:33.333%;overflow:hidden;transition:transform .52s cubic-bezier(.2,.7,.2,1);will-change:transform}.tbx-1197__slice svg{position:absolute;top:0;height:100%;width:300%;max-width:none}.tbx-1197__slice--one{left:0}.tbx-1197__slice--two{left:33.333%}.tbx-1197__slice--three{left:66.666%}.tbx-1197__slice--one svg{left:0}.tbx-1197__slice--two svg{left:-100%}.tbx-1197__slice--three svg{left:-200%}.tbx-1197__label{position:absolute;z-index:2;bottom:0;inset-inline:0;padding:16px 9px 8px;background:linear-gradient(transparent,#062a45bd);color:white;font:700 10px system-ui;letter-spacing:.16em;display:flex;justify-content:space-between}.tbx-1197__label b{font-size:17px}.tbx-1197:is(:hover,:focus-visible) .tbx-1197__slice--one{transform:translateY(-11px)}.tbx-1197:is(:hover,:focus-visible) .tbx-1197__slice--two{transform:translateY(11px)}.tbx-1197:is(:hover,:focus-visible) .tbx-1197__slice--three{transform:translateY(-7px)}.tbx-1197:focus-visible{outline:3px solid #247d89;outline-offset:3px}
@media (prefers-reduced-motion: reduce) {.tbx-1197,.tbx-1197 *,.tbx-1197::before,.tbx-1197::after,.tbx-1197 *::before,.tbx-1197 *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Portfolio / Photography
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末で重要情報をホバー時にだけ隠さない設計にしてください。
Browser：Chrome・Firefox・Safari・Edgeの最近のバージョンを想定。:has()およびclip-path等は対応ブラウザを確認。
Reduced Motion：prefers-reduced-motion: reduce 対応。