Animated Hero Overlay
Animated Hero Overlay

The responsive width, fixed height image has an overlay with another image, a caption and descriptive text.
The overlay image has a scale animation from the center.
The overlay text has a fade in animation.

Image Version

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.

Navigation

The Switch Navigation widget creates an inline navigation when viewed on computers and switches to a hamburger drop down on mobile devices.
If viewing this page on a computer, reduce the browser width to see the navigation switch from one type to the other.
It can have up to fourteen links. The last two links can be configured to open external pages and in a new window if required.
The navigation is designed to be used in conjunction with a hero image or other full width item. It can appear above or below or overlay the top or the bottom of the item. For an overlay, the navigation is placed below the hero image on the EverWeb design canvas and then the appropriate box in the widget settings is checked to place it in the required overlay position when viewed in the browser.
Current Page
The widget has an option to display the current page tab in a different color and also to add an animated underline to it.

© EverWeb Widgets -