Expandable Gallery

A responsive image gallery with an interactive hover effect that expands images dynamically.

Install using CLI

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/expandable-gallery.json"

Copy and paste the following code

ExpandableGallery.vue

Prop Name	Type	Default	Description
`images`	`string[]`	`[]`	Array of image URLs to display in the gallery.

Interactive Hover Effect: Images expand when hovered over, creating a dynamic and engaging user experience.
Responsive Design: The gallery automatically adjusts to the container size, ensuring it looks great on all devices.
Smooth Transitions: Includes smooth scaling animations for a polished visual effect.
Customizable Content: Easily update the images array to change the gallery's content.

On This Page