accordion image expand hover gallery flex blur portfolio image showcase team member photo display product category browser gallery with reveal labels need interactive image gallery without JS want expand-on-hover image accordion need blurred inactive images with label reveal
Image Accordion
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/image-accordion.json Preview
Background
Customize
Quick Start
<div class="image-accordion"><div class="image-accordion-item"><img src="..." alt="..."><span class="image-accordion-label">Title</span></div></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 2222 bytes · 100 lines
- Custom Properties
-
--accordion-height--accordion-gap--accordion-radius--accordion-collapsed--accordion-speed--accordion-ease - Classes
-
.image-accordion.image-accordion-item.image-accordion-label
accordion image expand hover gallery flex blur
Flex-based image accordion: hovered item keeps flex: 1, siblings collapse to --accordion-collapsed (18%). Inactive images get a blur overlay via backdrop-filter. Labels slide up on the active item. Stacks vertically on mobile.
Three-image gallery
<div class="image-accordion">
<div class="image-accordion-item">
<img src="https://picsum.photos/seed/a/960/480" alt="Mountain landscape">
<span class="image-accordion-label">Mountain Retreat</span>
</div>
<div class="image-accordion-item">
<img src="https://picsum.photos/seed/b/960/480" alt="Ocean view">
<span class="image-accordion-label">Coastal Living</span>
</div>
<div class="image-accordion-item">
<img src="https://picsum.photos/seed/c/960/480" alt="Forest path">
<span class="image-accordion-label">Forest Trail</span>
</div>
</div>Shorter, rounder variant
<div class="image-accordion" style="--accordion-height: 320px; --accordion-radius: 1.25rem; --accordion-gap: 8px;">
<div class="image-accordion-item">
<img src="..." alt="...">
<span class="image-accordion-label">Label</span>
</div>
<!-- more items -->
</div>