Array Hero

The hero was designed specifically to allow spacing for an item below it to move up and overlap. It is shown above with the ThemeKit Array OL Image widget animating up and over it.
This gives a more dramatic user experience and is excellent for drawing attention to the item illustrated in both widgets.
Images
The image is inserted in three sizes and has the option to be lazy loaded. Before importing into EverWeb the images in the demo were optimised and sized to …

• Large image 1200 x 800px - file size 75KB
• Medium image 720 x 480px - file size 35KB
• Small image 375 x 480px - file size 40KB

Content

The content has a heading with the option to add a text shadow to Google hosted fonts, a styled span, description and one or two internal links.
The content can be vertically aligned at the top, center or bottom and its position on Y-axis adjusted. It has the option to fade in onload if required.

Array Hover

The ThemeKit Array Hover widget has two, three or four items with an image, heading and text.
The overlay can appear on hover on computers and the images have a lazy load function.
Link
The items are configured as internal/external links indicated by the icon in the center.
The icon size is set using scale transdorm. There are sliders for initial scale, hover scale and mobile scale.
The hover has a control to set the animation time in milliseconds.