Image Strip Expander

Preview component: Here

About

The Expandable Image Strip is a versatile component that creates an elegant, interactive image gallery experience. It displays multiple images in a condensed strip layout, with smooth animations that expand cards when users interact with them.

Key Features

• Flexible Interaction Modes - Choose between hover (desktop), click (all devices), or static display to match your design needs

• Smart Proximity Scaling - Cards adjacent to the active card automatically adjust their width for a natural, flowing appearance

• Customizable Image Rendering - Control how much of each image is visible when expanded, from 10% to 100% of the component width

• Responsive Design - Automatically adapts to touch devices, ensuring optimal interaction on mobile and tablet

• Visual Customization - Full control over border radius, card spacing, borders, shadows, and inactive card dimming

• Smooth Animations - Built-in transition controls with optimized performance for silky-smooth expansions

• Accessibility Ready - Includes proper ARIA labels and keyboard navigation support

Perfect Use Cases

• Portfolio galleries showcasing multiple projects

• Product image carousels for e-commerce

• Before/after comparisons

• Team member showcases

• Feature highlights

• Image-based navigation menus

The component intelligently handles layout calculations, ensuring images remain centered and properly scaled regardless of the number of cards or container size.

The proximity effect creates a natural visual hierarchy, drawing attention to the active card while keeping neighboring cards visible and accessible.

Simply add your images, customize the interaction mode and visual styling, and you’re ready to create an engaging gallery experience that works beautifully across all devices.

How to Use

• Adding Images: - Click the “Images” property in the control panel - Add images using the “+” button - Each image can be uploaded or linked from a URL

• Reorder images by dragging them in the array Interaction

• Settings: - Choose “Hover” for desktop hover expansion (auto-switches to click on mobile)

• Choose “Click” for click/tap expansion on all devices

• Choose “None” for a static display without interaction customizing the expansion

• Use “Image Render Width” to control how much of the image shows when expanded (10-100%)

• Adjust “Proximity Effect” to make cards near the active card appear wider (0-5)

• Set “Default Expanded Index” to have a card pre-expanded on load (0 = none, 1 = first image, etc.)

• Visual Styling: - Adjust “Border Radius” for rounded corners on cards

• Set “Card Gap” to control spacing between cards

• Add borders using the “Border” control

• Apply shadows to active cards with “Active Shadow”

• Dimming Effect: - Enable “Inactive Dimming” to darken non-active cards

• Customize the “Overlay Color” for the dimming effect Animation

• Use the “Transition” control to customize expansion speed and easing

Tips

• The component automatically adapts to touch devices

• Images are centered and cropped to fit the card height

• On mobile, interaction automatically switches to click/tap regardless of mode setting