Image Strip Expander
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 Scale — 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 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
Refund Policy
Due to the digital nature of my products, all sales are final, and refunds will not be issued. Please review all product details carefully before purchasing. If you have any questions or need clarification, feel free to reach out before completing your order.
By clicking "Pay now," you authorize Polar Software, Inc., our online reseller and merchant of record, to charge your selected payment method the amount shown above, and agree to the Buyer Terms. This is a one-time charge.