Action Hero

This hero image is created with an invisible overlay using the CSS Responsive Grid Module. The grid is set up with three columns and three rows.
The overlay has three items - an h1 heading, a text box with optional heading and a CTA style link. Each item can be place in position using the controls to define the column and row number.
Images
The widget loads the images in three different sizes - one for each device type. The images in this example were cropped to 1600px x 1000px, 1200px x 750px and 800px x 500px respectively before importing into EverWeb.
Each image has a control for entering the height. When the page is viewed on a mobile phone in portrait mode, the image fills the height of the screen no matter what size it is. This is achieved by setting its height in viewport units. A height of 100vh will set the item to fill the height of the browser or device window no matter what size it is.
Overlay
There is a checkbox for turning on the overlay and controls for setting its color and opacity. The top/bottom and left/right padding can be adjusted to space items away from the edges if required.

The overlay has three items - an h1 heading with an optional underline animation, an HTML5 article element with an optional heading and text and a CTA link with an outline drawn around it using CSS animation.
Item Position
The items are positioned by defining which column and row they are to occupy. Columns are named left, center and right and the rows are 1, 2 and 3.
Vertical Align
The items can then be vertically aligned within the row by selecting from start, center or end which align the item at the top, center or bottom of the row.

Styles

The text can use a web safe font or a non websafe or Google hosted font with a web safe fallback.
The main h1 heading has controls for font size, color, style and letter spacing. The undeline animation inherits the font color.
The text box has controls for heading size, text size font color and line height.
The link has controls for font size, color and hover color and for setting the animated outline width and color.
Background
The heading and text box share controls for setting the background color and its opacity, the border radius and the top/bottom and left/right padding.
The link has its own controls for setting the top/bottom and left/right padding. and shares the background setting with the other two items.

Animation

The animation is turned off by default so that the overlay items can be seen while editing then on the EverWeb design canvas. It is turned on by checking a box and then the animation delays can be set in seconds. These are for the overlay, heading, heading underline, text, link and link outline.
Start out by setting the overlay delay at zero and increasing the time of the others in 1 second steps from 1 to 5.
Fix For Scroll Over
The overlay can be fixed to allow the items below to scroll over it when viewed on computers.

Create CTA Scroll Down

The CTA link in the Action Hero can be used as a smooth scroll down in conjunction with a suitable anchor widget. In this example, the Responsive Heading widget - marked in red - is used to create the anchor by checking the "Create Anchor" box and entering an ID number - in this case the number is 1.
The external link box is checked and the ID - #1 - is entered into the URL box.
The "Create Scroll Down" box is checked and the scroll time in milliseconds entered.