Octagonal Images

The image grid can have a color or an image background and reverts to the color when viewed on phones. The number of items per row can be set for each device type and the item spacing and grid padding can be adjusted.
Images
The images used in the demo were cropped to 400px square before importing into EverWeb. The hexagonal shape is created by adding a CSS clip-path to the image container.
The container is a hyperlink which can open open internal or external pages and in a new window if required.
Captions
The captions are vertically centered and can use a Google hosted font with a web safe fallback if required.
The caption container uses an inline block dtsplay so that it can be centered using a CSS transition or stuck to the left or right edge of the image.Returns in the caption are created using the HTML5 line break <br>.
The captions can be set to show on hover when the page is viewed on computers.
Animation
The images can animate in if required. The animation is fade in and the time and delay are set in seconds.