Team 39 - Hover overlay portrait grid

Pro

Left-aligned heading above a square portrait grid that reveals each member role on hover.

Shadcn Team 39 block

Component data

ID
team39
Access
pro
Created
Aug 19, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Team 39 block design & features

Team39 is a photo-led team grid built with shadcn/ui surfaces. A left heading and short instruction sit above eight square portraits. The name is visible on a gradient at rest. Hovering a tile zooms the photo slightly and reveals the role.

Tiles use large rounded corners, hairline borders, and cover-cropped photographs. Overlay type sits in high-contrast light text over a darkened gradient so it stays readable on busy images. Motion is limited to scale and fade.

This reads as a modern, image-first roster rather than a name-and-avatar directory. Complexity is moderate and mixed: layout and hover are CSS-driven, while the block still needs a full set of portraits and titles.

The grid starts at two columns, then three, then four on large screens.