Responsive Grid Layout Row

The layout consists of three HTML5 <figure> elements with an image and optional overlay, vertically centered caption. Each item is placed in a column of a three column grid and made to span 2 columns. The overlap is adjusted by varying the grid column gap using a slider.
The image sizes for both on load and hover state are set using a slider to adjust the scale. The center image can be brought to the front if required as shown in the example.
Images
The images files should be cropped square with a width and height of about 480px. Each image has a field for entering alt text for the search engines.
Captions
The captions are optional and can be turned on for each image. They can use a web safe font or a non websafe or Google hosted font with a web safe fallback. There are controls for font size, mobile size, color, hover color and the background color and its opacity.
Links
The images can be configured as internal links. Each image has a checkbox to turn this on. The link can be indicated by having a hover color for the caption and/or by scaling the image up on hover.
Layout Options
The images are layed out inline and would normally overlap the one to its left. The center image has a checkbox which brings it to the front so that it sits on top of the ones on either side.
The relative size of each image in its onload and hover states can be changed using the controls for adjusting the scale amount.
The amount of overlap can be changed using the slider which adjusts the percentage grid gap. The lower the value - the more the overlap.
Using three equal sized landscape or portrait images will create ovals.