Masonry Bento Grid With Images
A four-column masonry layout of linked image cards with hover overlays. Each card reveals the link URL on hover with a dark overlay transition.
Bento grids can be useful.
Discover innovative solutions that transform the way you work and create. Our cutting-edge tools are designed to empower.
The grid arranges cards into four columns on desktop, each column containing 3-4 cards of varying heights. A CSS mask with linear gradient fades the bottom of the entire grid, creating depth. Corner cards have custom border radius values that match the outer container.
Each card wraps an image in a Next.js Link component. On hover, a pseudo-element overlay fades to 90% black opacity while centered text reveals the destination URL. The transition uses CSS rather than JavaScript for better performance across many cards.
Works well for brand logo walls, client showcase sections, portfolio grids, partner listings, and any layout where you want to display many linked images compactly.
More from Bento Grids
Included with All-Access
One payment unlocks the code for this block and every other block, template and page.
Get All-AccessExplore more
About this block
The grid arranges cards into four columns on desktop, each column containing 3-4 cards of varying heights. A CSS mask with linear gradient fades the bottom of the entire grid, creating depth. Corner cards have custom border radius values that match the outer container.
Each card wraps an image in a Next.js Link component. On hover, a pseudo-element overlay fades to 90% black opacity while centered text reveals the destination URL. The transition uses CSS rather than JavaScript for better performance across many cards.
Works well for brand logo walls, client showcase sections, portfolio grids, partner listings, and any layout where you want to display many linked images compactly.