ThemeKit Hex Grid

The grid layout is created using flexbox and the images are inserted in a haxagonal container. The container overly can animate in on hover when viewed on computers and appears on load when viewed on mobile devices.
The overlay has two sets of control sfor color and opacity - one for when the item is viewed on computers and the other for mobile devices. If viewing this page on a computer, reduce the browser width to see the change in overlay color and opacity.
The overlay has a heading and text descritpion which can have a sparator if required. As can be seen from the demo, the font can be Google hosted with a web safe fallback.
Images
The images in the demo grid were cropped to 360px square before importing into EverWeb which is large enough to give good quality and small enough not to effect the page download time too much.
Lazy Load
The images are set for lazy loading which means that they don't effect the rest of the page content download time - even when the maximum number of 120 images is inserted.
Lnks
Each hexagon is a link which can be configured to open internal or external pages and in a new window if required.