26 CSS Accordions — Vertical & Horizontal
Image Reveal
Hover or focus to widen a column; the image inside zooms to fit while siblings collapse.
Image Reveal the 10th of 26 designs in the 26 CSS Accordions — Vertical & Horizontal collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="acc-img">
<div class="acc-img__col" tabindex="0" style="--bg: #3a2a55">
<span class="acc-img__lbl">Aurora</span>
</div>
<div class="acc-img__col" tabindex="0" style="--bg: #553a2a">
<span class="acc-img__lbl">Copper</span>
</div>
<div class="acc-img__col" tabindex="0" style="--bg: #2a553a">
<span class="acc-img__lbl">Sage</span>
</div>
<div class="acc-img__col" tabindex="0" style="--bg: #2a3a55">
<span class="acc-img__lbl">Slate</span>
</div>
<div class="acc-img__col" tabindex="0" style="--bg: #552a3a">
<span class="acc-img__lbl">Berry</span>
</div>
</div> .acc-img {
display: flex; gap: 3px; height: 220px;
border-radius: 12px; overflow: hidden;
}
.acc-img__col {
flex: 1; cursor: pointer; outline: none;
background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--bg), white 25%), var(--bg));
display: flex; align-items: flex-end; padding: 14px;
transition: flex .5s cubic-bezier(.3,1,.3,1), filter .3s;
filter: saturate(0.7) brightness(0.85);
}
.acc-img__col:hover, .acc-img__col:focus {
flex: 4; filter: saturate(1.2) brightness(1);
}
.acc-img__lbl {
font: 700 12px/1 system-ui; letter-spacing: 0.14em;
text-transform: uppercase; color: #f0eeff;
text-shadow: 0 1px 8px rgba(0,0,0,0.4);
} More from 26 CSS Accordions — Vertical & Horizontal
Cinema ReelAurora StripDiagonal SlantStepped StairCircular ArcMarquee HeaderCode CommentPaper FoldedEqualizerStacked CardsHolographic SlotAurora Drift
View the full collection →