Lumise

Stacked image gallery with color reveal

A stacked image gallery where photos start in black and white and reveal full color on hover. The hovered image scales to XL while neighbors shift to large — creating a natural focus hierarchy. Built for team showcases, portfolios, and storytelling sections that need to feel alive. Features Black and white to full color reveal on hover Hovered image scales to XL size smoothly Neighboring images scale to large for a natural hierarchy Non-hovered images stay grayscale for visual depth and focus Smooth stacked layout with configurable sizing Responsive — desktop, tablet and mobile optimized Easy image swap, size, color and transition customization No external dependencies Property Controls Content — image array with swap support Sizing — XL hover size, large neighbor size, default size Animation — transition speed, scale easing, color reveal timing Colors — grayscale filter intensity, background color Technical Details CSS filter for grayscale to color transition CSS transform scale for three-tier size hierarchy React useState for hover index tracking Neighbor detection for large scale assignment Responsive breakpoints for all screen sizes Smooth transitions via CSS cubic-bezier easing Use Cases Team introductions · Portfolio highlights · Product showcases · Agency websites · Landing page storytelling · Photography collections · Brand campaigns SEO Keywords framer stacked gallery · framer hover effect · framer color reveal · framer image gallery · framer interactive gallery · framer grayscale hover · framer team showcase · framer portfolio component · framer image hover · framer focus effect · framer photo stack · framer gallery component · framer image reveal · framer code component · framer photography grid

Stacked image gallery with color reveal