Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<a href="#comparison" class="tbx-1108" aria-label="リフォーム前後の比較を見る"><span class="tbx-1108__before" aria-hidden="true"><i></i><span>BEFORE</span></span><span class="tbx-1108__after" aria-hidden="true"><i></i><span>AFTER</span></span><span class="tbx-1108__divider" aria-hidden="true"></span><span class="tbx-1108__cta">比較を見る <b aria-hidden="true">↗</b></span></a>
CSS
.tbx-1108{display:block;width:min(288px,100%);height:186px;position:relative;overflow:hidden;border-radius:9px;color:#fff;text-decoration:none;font-family:system-ui,sans-serif;background:#b5b1a4;isolation:isolate}
.tbx-1108__before,.tbx-1108__after{position:absolute;inset:0;display:block}.tbx-1108__before{background:linear-gradient(155deg,#b0aea6 0 65%,#918b7f 65%);filter:saturate(.65)}
.tbx-1108__after{background:linear-gradient(155deg,#88beb4 0 63%,#5d877d 63%);clip-path:inset(0 48% 0 0);transition:clip-path .65s cubic-bezier(.2,.8,.2,1)}
.tbx-1108__before i,.tbx-1108__after i{position:absolute;left:19%;top:18px;width:58%;height:128px;border:9px solid #e3e1ce;box-shadow:11px 9px 0 #344e5555;background:linear-gradient(150deg,#a9a799 0 45%,#8c8d8a 45% 68%,#a59a89 68%)}
.tbx-1108__after i{border-color:#d9e8de;box-shadow:11px 9px 0 #3d74644d;background:linear-gradient(150deg,#bfdbc9 0 45%,#739db3 45% 68%,#7caf9b 68%)}
.tbx-1108__before>span,.tbx-1108__after>span{position:absolute;top:8px;font-size:9px;letter-spacing:.1em;font-weight:800;padding:5px 8px;background:#22394aac}.tbx-1108__before>span{left:9px}.tbx-1108__after>span{right:9px}
.tbx-1108__divider{position:absolute;left:52%;top:0;bottom:0;width:3px;background:#fff;box-shadow:0 0 5px #0004;transition:left .65s cubic-bezier(.2,.8,.2,1)}.tbx-1108__divider:before{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:32px;width:32px;display:grid;place-items:center;color:#345d5b;font-size:18px;font-weight:700;background:#fff;border-radius:50%}
.tbx-1108__cta{position:absolute;bottom:0;right:0;left:0;display:flex;align-items:center;justify-content:space-between;padding:12px 13px 11px;background:linear-gradient(transparent,#203c43cf);font-size:11px;font-weight:750}.tbx-1108__cta b{font-size:16px;font-weight:400}
.tbx-1108:is(:hover,:focus-visible) .tbx-1108__after{clip-path:inset(0 8% 0 0)}.tbx-1108:is(:hover,:focus-visible) .tbx-1108__divider{left:8%}
.tbx-1108:focus-visible{outline:3px solid #c1e8df;outline-offset:3px}@media(prefers-reduced-motion:reduce){.tbx-1108 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Comparison / Gallery
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では実際のリンク操作を優先し、必要な情報は通常状態でも提供してください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。