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.
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
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
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
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
Hamim Reza
