Image Curves

The first example has three images on a concave curve and the one below is convex. The more an image is rotated - the more space it needs. The angle can be adjusted from zero to 15° and the position of the center image is calculated in the CSS to compensate for the change in angle.
The concave bottom is created by applying a negative angle to the first image and a positve angle to the last one and vice versa for the convex bottom. The relative position of the images is adjusted using CSS calc.
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.
NOTE: The greater the angle of rotation - the wider the column gap needs to be to stop the images in the first row from overlapping below the break point.
Break Point
At the first break point - which is user selectable - the number of columns is reduced to 2 and image 3 is moved to the second row width its rotation angle set to zero.
The next break point is preset for mobile phones in portrait mode. The number of columns is reduced to 1 and the images are stacked with zero rotation.
Captions
The optional captions can be styled for font size, color and background color and its opacity. They can appear on page load or on hover when viewed on computers.
Links
The images can be configured as hyperlinks to open internal or external pages with a new window option. The info icon can be turned on to indicate that the image is a link. It can be styled for icon color, hover color and background color and its opacity.
Link the captions, the icons can be set to appear on hover when viewed on computers.