AnimationsProNew
Image Accordion
Images stand in a row. The hovered one widens and shows its caption while the rest shrink to slim frosted strips. Pure CSS.
Customize
color
overlayColor
titleColor
descriptionColor
Based on Tailwind Image Accordion (MIT license) · Terms of use
Props
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| items | { src: string; title: string; description: string; href?: string }[] | — | Panels: image, title, caption and link. |
| height | number | 420 | Panel height on wide screens in pixels. |
| color | string | "rgba(255, 255, 255, 0.5)" | Ring around the panel that has keyboard focus. |
| overlayColor | string | "rgba(0, 0, 0, 0.3)" | Veil over the squeezed panels while another one is open. |
| titleColor | string | "#ffffff" | Colour of the titles. They sit on the dark bottom of the image, so they stay light. |
| descriptionColor | string | "rgba(255, 255, 255, 0.7)" | Colour of the short line above the title. |
| className | string | — | Extra classes. |
Dependencies
2 required packages
npm install clsx tailwind-merge