Responsive Animated Image
Fade In Overlay

The image is inserted in an HTML5 article element which has responsive width and a maximum width setting to contain the spread to the image file's width.
The image should be cropped to the intended maximum width setting before importing into EverWeb.
Overlay
The overlay has a background color with an opacity slider to set the required amount of transparency required to make the text readable.
There is an h1 heading, an optional text field and an optional CTA style hyperlink.
The text can use a web safe font or a non web safe or Google hosted font with a web safe fallback.
The link can be configured to open an internal or external page and in a new window if required.
Animation
The fade in animation is applied to the overlay so that it - and its content - fade in together. The animation is written in the internal styles rather than using a large stylesheet like the EverWeb default animation. This saves downloading a large stylesheet with a bunch of animations that are not required.
The animation delay and time are set in seconds.
Viewport Scroll
The widget includes a jQuery plugin which prevents the animation from occuring before the item is scrolled into the viewport. It does this by applying a hidden class to the item on page load and then a visible class when it is scrolled into view.
The images below will scroll into view and then the overlay will animate in.