Overlapping Images

The grid has 9 columns and 7 rows when viewed at browser/device widths above the break point.
Each image spans 5 columns to create the horizontal overlap and 4 rows to create the vertical overlap.
The heading and text block are centered horizontally and vertically in the spaces.
Images
The images are inserted in a <figure> element with alt text for the search engines. The caption inserted in a <figcaption> element which is absolutely positioned to overlay the bottom of the image.
The <figure> can have a border if required and the opacity of the images can be reducted to show the background image when present. The image opacity is reset to 1 below the break point.
Background
The background can be a solid color with an opacity slider or an image. Below the break point, the background image is removed to be replaced by the color selected.
Break Point
In this example,the break point is set so that the layout changes on tablets in portrait mode. The grid is reduced to 1 column so that all the items stack.
The grid has 4 rows so that the heading and text are in a row with auto height and the images are in rows with a height of 1fr (fractional unit). The items are vertically spaced by the value given to the "grid-row-gap" selector.
Stacking Order
Since the images are relatively positioned, the bottom one will be on top of the first image in the stacking order. There is a checkbox which will bring the top image to the front by assigning it a z-index.