Hero Switch Scroll Over
The full width, fixed height image has a an overlay with a caption, optional text description and a CTA style link. The image switches to responsive height when viewed on mobile devices. It can be set to viewport height on computers so that it fills the screen vertically as well as horizontally.
NOTE: The widget includes the picture polyfill so that the picture element will work in obselete browsers like the later versions of Internet Explorer.
Images
Two images are inserted - one for computers and a much smaller one for mobile devices. The large image used here is 1600 x 1000 px and weighs in at 287 KB. The smaller image is 800 x 500px width a file size of 100 KB.
Scroll Over
The image allows the content below to slide up over it on scroll. On mobile devices, the image scrolls with the rest of the content.