Editorial Gallery Focus
A featured photograph expands within an editorial gallery grid when hovered.
A featured photograph expands within an editorial gallery grid when hovered.
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-1069" role="group" aria-label="Sample gallery"><figure tabindex="0"><div class="tbx-1069__art tbx-1069__art--a"><span aria-hidden="true">◒</span></div><figcaption>LANDSCAPE</figcaption></figure><figure tabindex="0"><div class="tbx-1069__art tbx-1069__art--b"><span aria-hidden="true">◆</span></div><figcaption>ARCHITECTURE</figcaption></figure><figure tabindex="0"><div class="tbx-1069__art tbx-1069__art--c"><span aria-hidden="true">◯</span></div><figcaption>DETAILS</figcaption></figure></div>
CSS
.tbx-1069{display:flex;gap:5px;width:min(300px,100%);height:174px;font:10px/1.3 system-ui,sans-serif}.tbx-1069 figure{flex:1;min-width:0;overflow:hidden;margin:0;border-radius:7px;position:relative;transition:flex .36s,filter .36s;isolation:isolate;cursor:default}.tbx-1069__art{height:100%;width:100%;display:grid;place-items:center;transition:transform .4s}.tbx-1069__art--a{background:linear-gradient(155deg,#86c4bc 0%,#558e98 49%,#244e67 50%,#23394e)}.tbx-1069__art--b{background:linear-gradient(165deg,#f1d4b5 0%,#db9e86 48%,#9b645b 49%,#684554)}.tbx-1069__art--c{background:linear-gradient(165deg,#95b5c9 0%,#5576a3 52%,#283b60 53%,#23304c)}.tbx-1069__art span{font-size:36px;color:#ffffffbb;filter:drop-shadow(0 6px 3px #132d4523)}.tbx-1069 figcaption{position:absolute;bottom:0;left:0;right:0;color:#fff;text-shadow:0 1px 2px #263c4899;background:linear-gradient(transparent,#182c3a99);padding:20px 7px 9px;font-size:8px;font-weight:800;letter-spacing:.05em;overflow:hidden;white-space:nowrap;opacity:.6;transition:opacity .36s}.tbx-1069 figure:is(:hover,:focus-visible){flex:2.35;filter:saturate(1.18)}.tbx-1069 figure:is(:hover,:focus-visible) .tbx-1069__art{transform:scale(1.06)}.tbx-1069 figure:is(:hover,:focus-visible) figcaption{opacity:1}.tbx-1069 figure:focus-visible{outline:3px solid #f0bb7a;outline-offset:-3px}
@media(prefers-reduced-motion:reduce){.tbx-1069 figure,.tbx-1069__art,.tbx-1069 figcaption{transition:none}}
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 portfolio galleries 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.