Exposure Proof Overlay
Exposure-correction lines and a miniature histogram overlay a portfolio photograph.
Exposure-correction lines and a miniature histogram overlay a portfolio photograph.
Live Demo
Hover over the element or use Tab to focus.
Source Code
Copy the HTML, CSS or JavaScript you need for your project.
HTML
<div class="tbx-1269"><figure class="proof" tabindex="0" aria-label="Photograph exposure controls, hover to preview"><svg class="art" viewBox="0 0 360 190" role="img" aria-label="Illustration of mountains and lake"><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
Insert the HTML and add the CSS to your stylesheet. Adjust colors and sizes and avoid class conflicts.
Use Case
Useful for photography portfolios and image galleries.
Technical Notes
Keep controls usable on touch devices. Test keyboard focus and reduced-motion preferences.
Mobile: Ensure the interactive content remains accessible without hover on touch devices.
Browser: Uses modern CSS. Check behavior in the browsers you support.
Reduced Motion: Check that prefers-reduced-motion is respected.
