Spectra Frame

Color reveal image grid with hover zoom

An interactive image grid where photos start in black and white and burst into full color on hover — scaling up while surrounding images adapt to maintain the grid. Built for portfolios, photography showcases, brand storytelling, and creative agency websites. Features Black and white to full color reveal on hover Hovered image scales up as the focal point Surrounding images resize smoothly to maintain grid layout Adaptive layout — no breaking, no overflow, no layout shift Responsive — desktop, tablet, and mobile optimized Smooth animations with configurable speed Customizable image count, spacing and colors No external dependencies Property Controls Content — image array with configurable count Layout — spacing, gap, grid structure Animation — hover transition speed, scale amount, color reveal timing Colors — grayscale filter, background color Technical Details CSS filter for grayscale to color transition CSS transform for scale animation on hover Adaptive grid recalculation on hover state change Responsive breakpoints for desktop, tablet, mobile React useState for hover index tracking Smooth transitions via CSS cubic-bezier easing Use Cases Photography portfolios · Creative agency sites · Brand storytelling · Editorial layouts · Image showcases · Visual narratives · Studio websites SEO Keywords framer image grid · framer hover effect · framer color reveal · framer interactive grid · framer photo gallery · framer grayscale hover · framer image hover effect · framer portfolio component · framer gallery component · framer zoom hover · interactive image framer · framer color transition · framer photography component · framer code component · framer image reveal

Color reveal image grid with hover zoom