The ThemeKit Reveal Sticky Hero provides a pure CSS solution for inserting a fixed hero item with a scroll overlay using layers and the CSS position "sticky"
Image
The image is inserted in three sizes for the various devices using the HTML5 <picture> inside a <figure> which has its position fixed. The images in the demo were sized to 1200 x 720px, 720 x 480px and a 9:16 aspect ratio image at 375 x 667px for phones in portrait mode before importing into EverWeb.
Overlay
The overlay has a grid layout with a centered <article> for the heading, text and optional link. There is an option to position a logo link at the top left if required.
The overlay is relatively positioned and scrolls over the image with the page content.
Sticky
The "window" is a container with the position property set to "sticky" which scrolls over the image and then sticks to allow the content below to scroll up and over.
Height
The height is set to a pixel value and the item becomes full height when viewed on phones in portrait mod.
Logo
The logo is inserted at the top left and has controls for the image width and its position on the X and Y-axis and is configured to create an internal link which would normally be to the home page.
In the example the logo is left out and replace by the ThemeKit Reveal Header widget which is set to overlay the hero at the top.
Scroll Down
The optional scroll down tab will scroll the overlay up to expose the image when clicked or tapped.
The tab shares the controls for the optional link for color, hover color and background color and its opacity.
The scroll animation time can be adjusted and is set in milliseconds.