Gallery 111 block design & features
Gallery111 is a shadcn/ui gallery with a left-aligned heading and description above a three column grid of portrait interior photos, two columns on small screens. Hovering or tabbing to a photo fades its room name in over a soft gradient at the bottom of the tile.
Clicking a photo brings it into focus: the photo grows out of its own tile, keeping its rounded corners, until it fills the whole grid, while the other photos fade back behind a light veil. A close button and a caption card with the room's title, a one-line description and previous and next buttons fade in once it has opened. Paging sends the current photo back to its tile as the next one grows out of its own. Clicking the photo, the close button or Escape shrinks it back into its tile and returns keyboard focus there.
The motion is a soft spring on size and position only, which keeps it smooth, and the effect stays inside the section rather than taking over the page. It suits interior design, architecture and hospitality portfolios. It needs a photo, a title and a short description for each room.