20 CSS Image Sliders11 / 20

Pure CSSMIT licensed

Zoom-on-Hover Expanding Accordion Gallery

Zoom-on-hover expanding accordion image gallery in pure CSS — a horizontal row where every panel shares width equally until you hover one, which smoothly expands to reveal its caption while the others gracefully collapse. Flexbox only, no JavaScript. The Apple-store product gallery and Everlane collection page pattern, useful for portfolio grids, restaurant menu galleries, and hospitality resort photo strips.

Published

Live Demo
Try it

The code

<div class="cis-11">
  <div class="cis-11__row">
    <figure class="cis-11__panel" tabindex="0"><img src="https://picsum.photos/seed/cis11a/900/1200" alt="Canyon"><figcaption><span>01</span>Red Canyon</figcaption></figure>
    <figure class="cis-11__panel" tabindex="0"><img src="https://picsum.photos/seed/cis11b/900/1200" alt="Harbor"><figcaption><span>02</span>Old Harbor</figcaption></figure>
    <figure class="cis-11__panel" tabindex="0"><img src="https://picsum.photos/seed/cis11c/900/1200" alt="Forest"><figcaption><span>03</span>Cloud Forest</figcaption></figure>
    <figure class="cis-11__panel" tabindex="0"><img src="https://picsum.photos/seed/cis11d/900/1200" alt="Dunes"><figcaption><span>04</span>White Dunes</figcaption></figure>
    <figure class="cis-11__panel" tabindex="0"><img src="https://picsum.photos/seed/cis11e/900/1200" alt="Reef"><figcaption><span>05</span>Coral Reef</figcaption></figure>
  </div>
</div>
.cis-11,
.cis-11 *,
.cis-11 *::before,
.cis-11 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cis-11 ::selection {
  background: oklch(0.83 0.15 20);
  color: #180404;
}

.cis-11 {
  --h: min(440px,68vh);
  --radius: 16px;
  --accent: oklch(0.8 0.15 25);
  font-family: 'Segoe UI',system-ui,sans-serif;
  color: #f5efec;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: radial-gradient(120% 120% at 50% 0%,#180d0b,#0a0605);
}

.cis-11__row {
  display: flex;
  gap: 10px;
  width: min(940px,96vw);
  height: var(--h);
}

.cis-11__panel {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.08);
  transition: flex .55s cubic-bezier(.2,.8,.2,1);
  outline: none;
}

.cis-11__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s,filter .4s;
  filter: brightness(.72);
}

.cis-11__panel:hover,
.cis-11__panel:focus-visible {
  flex: 5;
}

.cis-11__panel:hover img,
.cis-11__panel:focus-visible img {
  filter: brightness(.92);
  transform: scale(1.05);
}

.cis-11__panel figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  background: linear-gradient(transparent,rgba(8,4,3,.82));
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s .1s,transform .4s .1s;
}

.cis-11__panel figcaption span {
  font: 700 11px ui-monospace,Menlo,monospace;
  letter-spacing: .2em;
  color: var(--accent);
}

.cis-11__panel:hover figcaption,
.cis-11__panel:focus-visible figcaption {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .cis-11__panel,
    .cis-11__panel img,
    .cis-11__panel figcaption {
    transition: none;
  }
}
/* No JavaScript — flex:1 → flex:5 on hover/focus drives the accordion. */
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Image Slider from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Zoom-on-Hover Expanding Accordion Gallery
Source: https://codefronts.com/components/css-image-slider/zoom-on-hover-expanding-accordion-gallery/

Zoom-on-hover expanding accordion image gallery in pure CSS — a horizontal row where every panel shares width equally until you hover one, which smoothly expands to reveal its caption while the others gracefully collapse. Flexbox only, no JavaScript. The Apple-store product gallery and Everlane collection page pattern, useful for portfolio grids, restaurant menu galleries, and hospitality resort photo strips.
## HTML
```html
<div class="cis-11">
  <div class="cis-11__row">
    <figure class="cis-11__panel" tabindex="0"><img src="https://picsum.photos/seed/cis11a/900/1200" alt="Canyon"><figcaption><span>01</span>Red Canyon</figcaption></figure>
    <figure class="cis-11__panel" tabindex="0"><img src="https://picsum.photos/seed/cis11b/900/1200" alt="Harbor"><figcaption><span>02</span>Old Harbor</figcaption></figure>
    <figure class="cis-11__panel" tabindex="0"><img src="https://picsum.photos/seed/cis11c/900/1200" alt="Forest"><figcaption><span>03</span>Cloud Forest</figcaption></figure>
    <figure class="cis-11__panel" tabindex="0"><img src="https://picsum.photos/seed/cis11d/900/1200" alt="Dunes"><figcaption><span>04</span>White Dunes</figcaption></figure>
    <figure class="cis-11__panel" tabindex="0"><img src="https://picsum.photos/seed/cis11e/900/1200" alt="Reef"><figcaption><span>05</span>Coral Reef</figcaption></figure>
  </div>
</div>
```
## CSS
```css
.cis-11,
.cis-11 *,
.cis-11 *::before,
.cis-11 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.cis-11 ::selection {
  background: oklch(0.83 0.15 20);
  color: #180404;
}

.cis-11 {
  --h: min(440px,68vh);
  --radius: 16px;
  --accent: oklch(0.8 0.15 25);
  font-family: 'Segoe UI',system-ui,sans-serif;
  color: #f5efec;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: radial-gradient(120% 120% at 50% 0%,#180d0b,#0a0605);
}

.cis-11__row {
  display: flex;
  gap: 10px;
  width: min(940px,96vw);
  height: var(--h);
}

.cis-11__panel {
  position: relative;
  flex: 1;
  min-width: 0;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.08);
  transition: flex .55s cubic-bezier(.2,.8,.2,1);
  outline: none;
}

.cis-11__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s,filter .4s;
  filter: brightness(.72);
}

.cis-11__panel:hover,
.cis-11__panel:focus-visible {
  flex: 5;
}

.cis-11__panel:hover img,
.cis-11__panel:focus-visible img {
  filter: brightness(.92);
  transform: scale(1.05);
}

.cis-11__panel figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  background: linear-gradient(transparent,rgba(8,4,3,.82));
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s .1s,transform .4s .1s;
}

.cis-11__panel figcaption span {
  font: 700 11px ui-monospace,Menlo,monospace;
  letter-spacing: .2em;
  color: var(--accent);
}

.cis-11__panel:hover figcaption,
.cis-11__panel:focus-visible figcaption {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .cis-11__panel,
    .cis-11__panel img,
    .cis-11__panel figcaption {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — flex:1 → flex:5 on hover/focus drives the accordion. */
```

How this works

The gallery is a flex row where each panel is flex: 1. On :hover, the panel transitions to flex: 5, and because flex distributes remaining space, its neighbours automatically shrink — no width maths. The flex-basis transition is animatable, so the expand/collapse is buttery.

Captions live inside each panel and fade/slide in only when that panel is expanded. Focus styles mirror hover so the accordion is keyboard operable, and it degrades to an even row when nothing is focused.

Make it yours

  • Change how dramatic the expansion is by editing the hovered flex-grow value (5 → 8 for more).
  • Set the gallery height via --h.
  • Adjust reveal timing with the transition duration on the panel and caption.
  • Round corners / add gaps with --radius and the flex gap.

Gotchas — read before shipping

  • All panels need a shared flex-basis: 0 (via flex:1) so growth is proportional and smooth.
  • Set overflow: hidden on panels or captions will spill while collapsed.
  • Provide tabindex="0" (done) so the expand also works on keyboard focus.

Browser support

ChromeSafariFirefoxEdge
111+15.4+113+111+

Floor set by oklch() as this demo is written. The core technique itself goes back further — Chrome 85+.

Animating flex-grow is widely supported; works in all current browsers.

Techniques used in this demo

tabindexMDN ↗filterMDN ↗radial-gradient()MDN ↗oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →