Slide Over Hero Image

Slide Over Icon Items

Layout

Item [1]

The columns are created using the CSS Grid Layout Module. At the maximum width there are 3 columns and one row.

Images

Media Queries

Item [2]

At the first break point - for tablets in landscape mode - there are two columns and two rows. The first two items remain in row 1 and the third item is centered in row 2.

Font Awesome

Content

Item [3]

The default content is an Ionicon icon with heading and text,.
There are options for a price/date and a CTA style link which is absolutely positioned at the bottom.

PNG Icons

Slide Over Four Items

Layout

The columns are created using the CSS Grid Layout Module. At the maximum width there are 4 columns and one row.

Images

Media Queries

At the first break point - for tablets in landscape mode - there are two columns and two rows. The first two items remain in row 1 and items three and four are in row 2.

Font Awesome

Content

The default content is an Ionicon icon with heading and text,.
There are options for a price/date and a CTA style link which is absolutely positioned at the bottom.

PNG Icons

Animation

Each item has the same animation time. A slightly different delay is set for items 2, 3 and 4. When all four items are stacked vertically on mobile phones, the delay for each is set to zero.

Hero

Slide Over Items

The RGL Stack SO widgets create responsive rows of items which not only slide up as they enter the viewport but overlay the item above by a preset amount.
The grid has either 3 or 4 columns and the layout changes to 2 columns below the break point. When there are 3 items, the third one becomes centered in row 2. On mobile phones in portrait mode the items stack vertically.
The grid has controls for grid gap, left/right padding and bottom padding and overlay amount. The items can have a border and/or a box shadow.
The container has a split background, The top part that overlays the item above is transparent and the rest is a solid color with an opacity slider.
Icons
The icons are created using the Ionicon stylesheet which are better quality and more unique than the Font Awesome range. The widget has a control for opening the Ionicon Cheatsheet to make finding and copying the icon code easy.
The icons have controls for adding a border and/or a box shadow and adjusting the icon size and its position.
Animation
The slide up animation has a control for setting the animation time in milliseconds for all the items and for setting individual delays for the items to create the staggered effect.
The control for Animation Distance is the distance that the items have to travel set in pixels. The greater the distance, the faster the items will enter the viewport.