First Item
The header overlaps the first item below using a negative bottom margin.
EverWeb Widgets
ThemeKit Snap Gallery
Grid
The grid layout allows the the text to overlap the image by inserting them in the same row and using column start and span.
Layout
Odd & even item layout can be switched by checking a box.
Vertical Overlap
The image overlap is created using a negative top margin on all the <figure> elements apart from the first one.
Horizontal Overlap
This can be adjusted using the value set for grid-column gap and the article element's left/right margin.
Snap Gallery Info
Using an offset layout with ample "white space" allows the visitor to find and focus on items a lot easier than if they were packed into tight rows.
Overlapping the text onto an image makes it very clear that the text and image are related.
This type of grid is much better than a slideshow for displaying items with an image and info. The images can be a lot smaller the grid images can be lazy loading by checking a box.
The items collapse to a single column on browser/screen widths below the break point. The grid image becomes full width so there is no need for mobile device users to download the large images by opening the lightbox slider.