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