Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1269"><figure class="proof" tabindex="0" aria-label="写真の露出補正表示。ホバーで確認"><svg class="art" viewBox="0 0 360 190" role="img" aria-label="山と湖のイラスト"><defs><linearGradient id="sky1269" x2="0" y2="1"><stop stop-color="#add6d9"/><stop offset="1" stop-color="#f7e2b7"/></linearGradient></defs><rect width="360" height="190" fill="url(#sky1269)"/><circle cx="292" cy="48" r="26" fill="#f5d49d"/><path d="M0 143 75 48 131 119 196 58 273 143 312 103 360 153V190H0" fill="#507a87"/><path d="M0 157 78 96 156 161 226 108 360 172V190H0" fill="#294d66"/><path d="M0 164Q90 146 180 162T360 160V190H0" fill="#6db0b7"/></svg><div class="exposure" aria-hidden="true"><span>EXPOSURE PROOF</span><div class="scale"><b>−1</b><i></i><i></i><i></i><i class="center"></i><i></i><i></i><i></i><b>+1</b></div><div class="hist"><i style="height:21%"></i><i style="height:48%"></i><i style="height:72%"></i><i style="height:93%"></i><i style="height:66%"></i><i style="height:45%"></i><i style="height:26%"></i></div></div><figcaption>LANDSCAPE STUDY <small>01 / 04</small></figcaption></figure></div>CSS
.tbx-1269{box-sizing:border-box;min-height:218px;padding:20px 16px;display:grid;place-items:center;background:#e8eef1;font-family:system-ui,sans-serif}.tbx-1269 *{box-sizing:border-box}
.tbx-1269 .proof{overflow:hidden;position:relative;width:min(320px,100%);margin:0;box-shadow:0 12px 24px #12364822;border:5px solid white;cursor:crosshair}
.tbx-1269 .art{width:100%;height:auto;aspect-ratio:360/190;display:block;transition:filter .45s}.tbx-1269 .proof figcaption{display:flex;align-items:center;justify-content:space-between;color:#36566a;background:white;font-size:10px;font-weight:800;letter-spacing:.09em;padding:11px}
.tbx-1269 small{font-size:9px;color:#79919c}.tbx-1269 .exposure{position:absolute;top:12px;left:12px;right:12px;display:grid;gap:9px;padding:10px 12px;background:#0b2831c9;color:white;transform:translateY(-116%);opacity:0;transition:transform .42s,opacity .38s}
.tbx-1269 .exposure>span{font-size:9px;letter-spacing:.13em}.tbx-1269 .scale{display:flex;align-items:center;justify-content:space-between;gap:5px}.tbx-1269 .scale i{width:1px;height:13px;background:#a9d5d9}.tbx-1269 .scale .center{height:20px;background:#eebc70}.tbx-1269 .scale b{font:500 9px system-ui}.tbx-1269 .hist{display:flex;height:24px;align-items:end;gap:3px;border-bottom:1px solid #ffffff66}.tbx-1269 .hist i{width:14px;background:#b3e0e5;transform-origin:bottom;transform:scaleY(.1);transition:transform .38s .16s}
.tbx-1269 .proof:is(:hover,:focus-visible) .exposure{transform:none;opacity:1}.tbx-1269 .proof:is(:hover,:focus-visible) .hist i{transform:none}.tbx-1269 .proof:is(:hover,:focus-visible) .art{filter:contrast(1.12) saturate(.88)}.tbx-1269 :focus-visible{outline:3px solid #cf8c43;outline-offset:4px}
@media(prefers-reduced-motion:reduce){.tbx-1269 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Photography, Gallery
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーができないため、フォーカス・タッチ操作を確認してください。
Browser：現行版のChrome・Safari・Firefox・Edgeを推奨。:has()を利用する素材は古いブラウザでは挙動が異なる場合があります。
Reduced Motion：prefers-reduced-motion: reduce 対応。