A hero image inserted in two sizes with a transparent animated overlay containing a heading, an HTML5 <figure> with PNG image, an <article> with heading and paragraph and a CTA style link.
The animations can fire once or every time the item enters the viewport and are created using a custom stylesheet.
The hero image has an animated overlay with two columns. One column has an image and the other a text block which animate in when the item is in the viewport. There are options to add a heading at the top and a CTA (call to action) link ay the bottom.
Animation
The overlay, main heading, image, article and the link all have their own controls for setting the animation type, time and delay.
The animations can be set to fire once or every time the item enters the viewport. The animation is preventedfrom firing on mobile phones by default. There is a checkbox to override this if necessary.
The grid has three images with captions and an article with heading, optional span, text and an optional link which can open internal or external opages and has a new window option.
The text section can be positioned in the grid by specifying its column and row number. On screen widths below the breakpoint its position is determined by the row number.
The captions can animate in on hover and overlay the bottom of the image.
The animation type has a seklectio of 15 different time. All the items share the same animation time but each one has its own control for setting the delay in milliseconds.
Note that the animated items are set to occur only once when they are in the viewport and the animation is orevented on mobile phones as it should be!
This <article> element can be moved to any position in the grid by specifying its column and row numbers. In this example it is in row 1 column 1.
Its position below the break point is set by specifying the row number.