Live Demo
マウスを乗せるかTabキーでフォーカスして変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1082" tabindex="0" aria-label="帆布バッグのディテールプレビュー"><div class="tbx-1082__pic" aria-hidden="true"><span class="tbx-1082__strap"></span><span class="tbx-1082__bag"></span><span class="tbx-1082__lens">TEXTURE<br><b>× 2.0</b></span></div><div class="tbx-1082__body"><b>CANVAS TOTE</b><small>帆布の質感をチェック</small></div></div>
CSS
.tbx-1082{width:min(267px,100%);background:white;border:1px solid #d6e2e7;border-radius:10px;overflow:hidden;font:11px/1.4 system-ui,sans-serif;color:#314e59;transition:border-color .3s}
.tbx-1082__pic{position:relative;height:145px;background:radial-gradient(circle at 40% 38%,#f3e4ca 0 10%,#dfc4a0 72%);display:grid;place-items:center;overflow:hidden}
.tbx-1082__strap{position:absolute;top:20px;width:78px;height:78px;border:11px solid #aa7a4f;border-radius:50% 50% 15% 15%;filter:drop-shadow(2px 3px 2px #765a3c3d)}
.tbx-1082__bag{position:absolute;bottom:7px;width:130px;height:102px;background:repeating-linear-gradient(90deg,#d0ad7e 0 3px,#c6a576 4px 6px);clip-path:polygon(3% 0,97% 0,100% 100%,0 100%);box-shadow:inset -10px 0 #9c754e46;border-bottom:8px solid #ac835b}
.tbx-1082__lens{position:absolute;right:14px;top:14px;width:82px;height:82px;border-radius:50%;display:grid;align-content:center;justify-items:center;gap:2px;background:repeating-linear-gradient(45deg,#c99c68 0 3px,#e6c598 4px 7px);border:4px solid white;box-shadow:0 6px 18px #513e362d;transform:translate(22px,20px) scale(.5);opacity:0;transition:transform .4s,opacity .35s;text-align:center;color:#503a2a;font:800 9px/1.2 system-ui,sans-serif}
.tbx-1082__lens b{font-size:13px}.tbx-1082__body{display:flex;justify-content:space-between;gap:10px;padding:14px 15px}.tbx-1082__body b{font-size:10px}.tbx-1082__body small{font-size:9px;color:#8298a2}
.tbx-1082:is(:hover,:focus-visible){border-color:#af8b64}.tbx-1082:is(:hover,:focus-visible) .tbx-1082__lens{opacity:1;transform:translate(0,0) scale(1)}
.tbx-1082:focus-visible{outline:3px solid #c79e65;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.tbx-1082,.tbx-1082 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
EC / Product Detail
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末にはリンクの本来の役割を残し、必要な説明は通常時にも読める形にしてください。
Browser：最新のChrome・Firefox・Safari・Edgeを想定。
Reduced Motion：prefers-reduced-motion: reduce に対応。