Live Demo
対象要素をマウスでホバー、またはTabキーでフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1281" tabindex="0" role="img" aria-label="色の反転と円形スポットライトの画像演出">
<svg class="tbx-1281__scene" viewBox="0 0 420 230" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs><linearGradient id="tbx1281sky" x2="1" y2="1"><stop stop-color="#f7d5b2"/><stop offset="1" stop-color="#c9dcbf"/></linearGradient></defs><rect width="420" height="230" fill="url(#tbx1281sky)"/><circle cx="305" cy="70" r="36" fill="#fff5c3"/><path d="M0 205L113 75l79 85 65-63 163 108v25H0" fill="#517f77"/><path d="M0 212l108-87 89 68 75-54 148 73v18H0" fill="#273e51"/><rect x="20" y="185" width="95" height="18" rx="5" fill="#eaab82"/></svg>
<svg class="tbx-1281__scene tbx-1281__normal" viewBox="0 0 420 230" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs><linearGradient id="tbx1281sky2" x2="1" y2="1"><stop stop-color="#f7d5b2"/><stop offset="1" stop-color="#c9dcbf"/></linearGradient></defs><rect width="420" height="230" fill="url(#tbx1281sky2)"/><circle cx="305" cy="70" r="36" fill="#fff5c3"/><path d="M0 205L113 75l79 85 65-63 163 108v25H0" fill="#517f77"/><path d="M0 212l108-87 89 68 75-54 148 73v18H0" fill="#273e51"/><rect x="20" y="185" width="95" height="18" rx="5" fill="#eaab82"/></svg>
<span class="tbx-1281__label">NEGATIVE / POSITIVE</span></div>
CSS
.tbx-1281{box-sizing:border-box;display:block;position:relative;max-width:100%;width:300px;aspect-ratio:420/230;border-radius:10px;overflow:hidden;isolation:isolate;background:#d6dccd;cursor:crosshair}
.tbx-1281__scene{display:block;width:100%;height:100%;position:absolute;inset:0;transition:filter .55s}
.tbx-1281__normal{clip-path:circle(100% at 70% 45%);transition:clip-path .65s ease}
.tbx-1281__label{position:absolute;left:11px;bottom:11px;z-index:3;padding:6px 9px;background:#182c39c9;color:#fff;border-radius:3px;font:700 10px/1 system-ui,sans-serif;letter-spacing:.08em}
.tbx-1281:hover .tbx-1281__scene:first-child,.tbx-1281:focus-visible .tbx-1281__scene:first-child{filter:invert(1) hue-rotate(155deg)}
.tbx-1281:hover .tbx-1281__normal,.tbx-1281:focus-visible .tbx-1281__normal{clip-path:circle(27% at 70% 45%)}
.tbx-1281:focus-visible{outline:3px solid #236987;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tbx-1281__scene,.tbx-1281__normal{transition:none}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Gallery / Photography
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ操作ではホバーと同じ結果にならないため、タップ・フォーカス時の動作も確認してください。
Browser：現行Chrome / Firefox / Edge / SafariのCSS機能を利用します。
Reduced Motion：prefers-reduced-motion: reduce でアニメーションを停止します。