Live Demo
マウスを乗せるかTabキーでフォーカスして、動きの変化を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1209"><a href="#tbx-1209-detail" class="tbx-1209-photo" aria-label="Explore woven fabric detail"><span class="tbx-1209-surface" aria-hidden="true"></span><span class="tbx-1209-shape" aria-hidden="true"></span><span class="tbx-1209-caption">01 / WOVEN TEXTURE</span><span class="tbx-1209-pip"><b>DETAIL ×4</b><span class="tbx-1209-weave"></span></span></a></div>CSS
.tbx-1209{box-sizing:border-box}
.tbx-1209{display:grid;place-items:center;width:100%;min-height:182px;background:#eee8dc;padding:16px;font-family:Arial,sans-serif}.tbx-1209 *{box-sizing:border-box}.tbx-1209-photo{display:block;position:relative;width:min(100%,300px);height:148px;overflow:hidden;background:#b5a98e;border-radius:4px;color:white;text-decoration:none;outline-offset:4px;box-shadow:0 4px 14px #51453022}.tbx-1209-surface{position:absolute;inset:0;background:repeating-linear-gradient(35deg,#ffffff12 0 2px,#00000009 2px 4px),linear-gradient(128deg,#6e806c,#c1ac85 65%,#a57d5f)}.tbx-1209-shape{position:absolute;left:36px;top:11px;width:148px;height:180px;border-radius:54% 46% 0 0 / 35% 35% 0 0;background:linear-gradient(125deg,#e5d6b5,#b88b63 45%,#624b3e);transform:rotate(-26deg);box-shadow:16px 12px 14px #44382b29}.tbx-1209-caption{position:absolute;bottom:11px;left:13px;font-size:9px;letter-spacing:.17em;font-weight:800;text-shadow:0 1px 3px #333}.tbx-1209-pip{position:absolute;right:12px;top:12px;width:108px;height:100px;padding:7px;border:2px solid white;border-radius:6px;background:#d4b691;box-shadow:0 7px 13px #382a3250;transform:translate(117px,-100px) scale(.75);opacity:0;transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .3s}.tbx-1209-pip b{position:relative;z-index:1;font-size:8px;letter-spacing:.1em;color:#4b3829}.tbx-1209-weave{display:block;position:absolute;inset:25px 8px 8px;background:repeating-linear-gradient(0deg,#815d4033 0 2px,#fff5e5aa 2px 4px),repeating-linear-gradient(90deg,#563c2f44 0 3px,#eed1a444 3px 6px)}.tbx-1209-photo:is(:hover,:focus-visible) .tbx-1209-pip{opacity:1;transform:translate(0,0) scale(1)}.tbx-1209-photo:focus-visible{outline:3px solid #684a32}
@media (prefers-reduced-motion:reduce){.tbx-1209 *, .tbx-1209 *::before, .tbx-1209 *::after{transition:none !important;animation:none !important;scroll-behavior:auto !important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Gallery / EC
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末では重要な情報をホバーでしか見られない構造にしないでください。
Browser：CSSの:has()を使用する素材は最近のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduceに対応。