Projects 8 - Three-column filterable gallery with overlays

Pro

Three-column image grid with category filter buttons that animate items on change, revealing title and description on hover.

Vue
Shadcn Projects 8 block

Component Data

  • ID:projects8
  • Access:pro
  • Created:Oct 1, 2025
  • Type:block

Projects 8 block design & features

This variant increases the gallery grid to three columns and uses a different set of creative category labels. A centered row of filter buttons sits at the top, with the active filter underlined. Selecting a category animates the grid using scale and opacity transitions to show only matching entries.

Each card shows a 4:3 image in a rounded container. On hover, a dark 60% overlay fades in and a text block slides up from below with the category in small tracking, the title in light large type, and a short description. Animation timing mirrors the two-column sibling with fast overlay and slightly slower text entrance.

The three-column layout increases density, making this variant better suited to larger collections or wider viewports. The visual language is identical to its two-column sibling: borderless cards, uppercase filter labels, and centered hover-reveal content.

On mobile the grid reduces to a single column, and the filter row wraps horizontally.