Hero Animated Overlay
The full width, fixed height image has options for another image and an overlay with a caption and optional text description and a CTA style link. The image switches to 100vh in height when viewed on mobile phones so that it fills the screen vertically as well as horizontally.
The second image has a scale animation and the overlay animation is fade in.
NOTE: The widget includes the picture polyfill so that the picture element will work in obselete browsers like the later versions of Internet Explorer and IE Edge.
Images
Each image is available in three sizes for the various devices - computer, tablet and mobile phone.
The large, medium and small images in this demo are 1600px, 1200px and 800px wide respectively.
The first image is inserted in the background. The second one uses the HTML5 <picture> element to load the three different sizes using media queries. This is contained in a <figure> which allows the image to have both an alt text attribute and a <figcaptio> for entering key words for the search engines.
The overlay link can be configured to open internal or external pages and there is a new window option if needed.