Folio Media

ThemeKit
Portfolio
Zoom Hero

Zoom Hero

The hero has a fixed height and can have either a solid color or gradient background use an image.for the zoom on scroll effect.
Images
The image is inserted in three sizes for the various devices using an HTML5 <picture> element so that it can have alt text for the search engines.
The images in the demo were sized to 1200 x 800px, 720 x 480px and 375 x 540px and optimised before importing into EverWeb.
Text
The text in the example uses the Google hosted font Alfa Slab One with a fallback to Verdana. On computers and tablets the text font size is expressed in vmin units so that it responds to changes in the browser/device window width.
The text has controls for adding text stroke and/or text shadow.
The optional scale up on page load animation has controls for animation duration and delay.
Zoom Function
The optional image zoom function uses a tiny, custon jQuery script to set the zoom effect. The lower the value the more the zoom up effect.

Image Grid

Image Grid

The ThemeKit Folio Image Grid widget uses the CSS Grid Layout Module to create a unique layout for either 3 or 5 images.
The images in row [1] have the same aspect ratio. The images in row [2] can have a different - but the same - aspect ratio if required.
Lazy Load
The images have a lazy loading function which should be turned on if the grid is not in view at page load.
Grid
The six column grid has its own controls for background color and padding and the grid gap can be adjusted.
Captions & Links
The captions are centered and overlay the bottom of the image.
When the link option is selected the icons appear at the top right. The link icons and the caption share the same color and background color.
The captions and link icons can appear on hover when viewed on computers.