Reveal On Scroll Slider

The ThemeKit Reveal Sticky Slider provides a pure CSS solution for inserting a fixed hero item with a scroll overlay using layers and the CSS position "sticky"
The slider is full width, fixed height with image captions. Naviagtion is by custom arrows or grab and drag on computers and can be swiped on touch devices.
There is an option for autoplay with pause on hover but this should only be used if there is a very good reason for it.
Images
The images are inserted in three sizes for the for computer and mobile devices using the HTML5 <picture> elememt. 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 slider and then sticks to allow the content below to scroll up and over.
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.