Action Hero Switch

This widget was designed to overcome three of the less desirable qualities of a standard hero image.
  [1] It inserts three images - one for each device type for better download efficiency.
  [2] It inserts the images in an <img> tag rather than as a background image so that it can have an alt text attribute.
  [3] The image switches from being fixed height on computers to responsive height on tablets and full height on mobile phones.
The image files are inserted in an HTML5 <picture> element so that different sizes can be loaded for each device type.
The image has 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.
The large image has a control for entering the height and a field for entering alt text for the search engines.
Overlay
The overlay animates in on page load and has 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 items are 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 underline 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 isetting 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 set in milliseconds.