CSS Grid
An image grid with a slide down info overlay on click or tap.
An image grid with a slide down info overlay on click or tap.
Each grid item has a chevron down icon at the upper right. When clicked or tapped, an info overlay slides down. The overlay has a heading, paragraph and an optional link.
The overlay can be open in EverWeb when the content is being added, Any overlay can also be set to be open on page load as can be seen from item 6 above.
Links
The links can be turned on individually and can be configured to open internal or external pages and in a new window if required. They share the same color as the text and have a hover option which is shared by the chevron tab.
Spacing & Styling
Items in a CSS Grid layout are separated using the "gap" property. Gap applies to the spacing of both columns and rows. If more control is required, the "grid-column-gap" and the "grid-row-gap" properties can be used.
The grid can be moved away from the browser/device window edges using left/right padding.
The items have controls for border width, color and radius and box shadow color and radius.