Hero Switch Image
A full width fixed height "hero" image looks great when viewed on computers but not so much on touch devices like the iPad and iPhone. This one overcomes the poor performance and image visibility by switching from fixed height on computers to responsive height on mobile devices and then viewport height on mobile phones in landscape mode. Viewport height means that the item has a height of 100vh (100 viewport units in height) and fills the height of the browser/device window.
Images
The widgets loads three images - one for each device type. The images used here are 1600px, 1200px and 800px wide respectively which means the mobile visitors don't have to wait for a large image file to download or burn uo their data allowance uneccessarilly.
Overlay
The overlay has controls for setting the color and its opacity. It has an h1 heading and options for a post title, date and a link.
The text can use a web safe font or a non web safe or Google hosted font with a web safe fallback. The font used in this example id the Google hosted "Stint Ultra Expanded".
Link
The link can open internal or external pages and in a new window if required. The link has controls for font size, color, hover color, border width and radius and can be alighed left,center or right.