Projects 10 block design & features
The block arranges nine images in a three-column grid with no visible gaps, each locked to a square aspect ratio. On hover, the image scales up slightly while a text panel slides in from below displaying a title and description. A subtle background overlay lightens behind the hovered tile to separate it from its neighbors.
Visually the component relies entirely on the photography for color and texture, keeping the surrounding chrome invisible. The hover overlay text uses muted tones so it reads clearly against any image without requiring a heavy scrim. Transitions on scale and translate are short and smooth.
The overall aesthetic is gallery-minimal, presenting content edge-to-edge with zero ornamentation. Complexity is low since there are no controls, headings, or navigation elements outside the grid itself.
On mobile the grid collapses to a single column, maintaining the square aspect for each image.