shadcn.io is not affiliated with official shadcn/ui
Hover Caption Masonry Gallery Block for React
A masonry wall of nine drawn interiors in three columns, each in its own framed cell, with a caption and a Save toggle that rise on hover and on focus and a live count of saved pictures.
Installation
Overview
A hover-caption masonry wall for React with Base UI. A centred header with a "3 saved" count sits over nine drawn pictures (rooms, stair halls, kitchens, facades) in three CSS columns, two on a phone. Each picture is a cell with its own hairline frame that overshoots the corners. A caption (title, place, year) and a Save toggle rise over the foot of the picture on hover and on focus, faded in by a mask, and are always shown under a coarse pointer. A saved picture keeps a filled mark in its corner, and the count follows in a polite status line. The pictures are drawn in the theme's greys, never photographed. It's built from Guides, Toggle and Badge. For inspiration sites, catalogues and any wall where a picture should stay clean until you reach for it.
FAQ
Is the caption only for the mouse?
No. The caption row holds a real Save toggle, so Tab reaches it and the caption appears with it (focus-within). Under a coarse pointer (a phone or a tablet) the caption and the toggle are simply always shown.
What does Save do, and what does the count say?
It flips a local list of saved ids; nothing is sent anywhere. The toggle is a native pressed button named "Save" plus the picture's title. A filled mark appears in the picture's corner and the "N saved" badge, a polite status, updates.
Why a mask instead of a colour overlay?
The caption sits on a solid bg-background panel whose top edge is faded into the picture with mask-image, so the text keeps full contrast in any theme and the picture is never tinted.
How do I use my own photographs?
The drawn pictures are one Scene component. Where the code comment says so, replace it with an <img> (object-cover in a box of the picture's own ratio) and give each entry a src. Keep each entry's ratio the photograph's own so the layout doesn't change.
Related
- Pro
Sortable Masonry Gallery
Masonry and mosaicA masonry wall of twelve drawn pictures of mixed ratio in CSS columns, framed with + marks on its corners, with an Order control (Newest or Oldest) that re-sorts them.
- Pro
Lightbox Gallery
Stage and thumbnailsNine pictures of a photography studio's year on shared hairlines, a featured frame and a caption under each, where every frame opens one viewer dialog with the whole picture, its credit, Previous and Next, a counter, arrow keys and a swipe.
- Pro
Balanced Waterfall Gallery
Masonry and mosaicA waterfall of twelve drawn pictures in two, three or four columns on shared hairlines, a switch between shortest-column and round-robin flow, and bars under the wall that read each column's height.
- Pro
Hover Card EXIF Gallery
Hairline gridsSix drawn frames in cells of their own, each a link with a hover card of camera, lens, aperture, shutter speed and ISO that opens on hover and on keyboard focus, and prints the same settings in the caption on a touch screen.
- Pro
Favorites Gallery
Select and actEight drawn prints, each in its own frame with a heart toggle, and a Favourites only switch with a count, a Clear favourites button and an empty state.
- Pro
Paginated Minimal Grid Gallery
Hairline gridsA quiet grid of twenty-four drawn concrete-architecture plates, eight to a page on shared hairlines, with a title and year that appear on hover and focus and the catalog pagination in a band that ends the block.