A two column grid layout with reveal on click. The relative width of the columns is adjustable.
The grid has an image with alt text in a <figure> and a heading, text and optional link in an <article>. The item psotion can be switched.
On screen widths below the break point the overlay is removed and the grid items stack with the text above or below the image.
The hero item above shows an image overlay on page load. The image container has left and right sections which slide aside on clicking the action tab.
Image
The image is inserted in two sizes for computer and mobile devices. The action tab has controls for icon color, background color and background opacity.
The icon can be animated if required to make it more noticeable.
Content
The content area has a two column grid layout where the relative column widths can be adjusted and the item position switched and the text inserted above or below the image on screen widths below the break point.
Curtain Angle
The angle at which the left and right "curtains" meet can be varied from approximately 45° left through vertical to 45° right using a slider.
A clipped container with an offset heading and an HTML5 <article> element with text and two optional links.
Triangle
The clipped top is created using clip-path on a rectangle and varying its height to change the angle.
The heading is moved up into the triangle area using a negative top margin.
The angle is removed on screen widths below the break point and the heading size reduced if required.
Animation
The article element is translated in on the Y-axis with a variable time and delay.
The overlay covers the browser/device window, fades in on page load and then fades out after a preset time. The animation also has a control for setting a delay before the item animates.
Content
The content has options for displaying an image with alt text and caption in a <figure> and/or a heading, text and optional link in an <article>. The demo shows all the available options.
Overlay
The full size overlay has controls for setting its background color and adjusting the opacity to partially show the page content if required.
The image and the text section are inserted as options for maximum flexibilty.
The animation has controls for time and delay