Project 5 E block design & features
The header is center-aligned with flanking horizontal lines around the studio name, a bold title, a description paragraph, a Shadcn UI outline Button, and a metadata line. Below, seven square images are arranged in a responsive grid (up to three columns) with variable column spans. Each image has a hover interaction that scales the image slightly and reveals a bottom overlay containing a title and short description, sliding up from below. A centered artistic vision section holds a heading, two body paragraphs, and a three-column stats row displaying artwork count, year, and venue.
The hover overlay uses a gradient from transparent to 90% background, with the entire overlay translating from fully hidden to visible on hover. Images scale by 5% on hover with a 700 ms transition. The stats row uses large bold numbers with small uppercase labels. Entry animations are staggered across all sections.
The block is the most gallery-focused variant, presenting the collection as a browsable grid rather than a single-project narrative. The hover interactions add discoverability, and the stats row provides a quantitative summary. Built with shadcn/ui tokens.
On mobile the grid reduces to one or two columns, and the hover overlays remain accessible via touch.