The container uses the CSS Grid Layout Module which allows all the items to maintain the same height with no extra code required.
The grid layout has a "align-self" property. This can have a value of start, center, end or auto. Auto is the default setting if the selector is not present and this is what makes all the heights equal by stretching each item to the same height as the tallest one in any row.
The images are shown with the optional border and box shadow.
The overlay can animate in on hover on computers and appear on page load on touch devices.
The caption can run to two or more lines by using the HTML5 line break <br> to create returns The caption has its own line height control to space out the lines.
The optional links are positioned absolutely in relation to the bottom and center using a CSS transform.
The container has extra padding at the bottom. to accommodate the link. This keeps all the links in line and creates a more uniform appearance to the layout.
The link can be configured to open internal or external pages using relative or absolute file paths. There is a checkbox to turn on the function to open the link in a new window.
The items are added using the EverWeb Widget API Assets List. Crop all three images square to the same size - 480px is big enough - and drag them together from the Finder and drop them onto the Assets List in the widget settings.
Select each file name in turn to enter the required data.
Text
As can be seen from the example, the widget can use a Google hosted font with a web safe fallback.
Links
Links are optional and are turned on globally. They open internal or external pages.
Links can be entered as relative or absolute file paths and open in a new window if required. Follow the link below to find out about file paths.
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.
Vertical Align
Grid items can be vertically aligned using the "align-self" property. These are …
[1] Auto - the item fills the height of the row
[2] Start - The item is aligned at the top of the row
[3] Center - The item centers itself vertically
[4] End - The item is at the bottom of the row.
The items in the widget above are set to align "auto" since they have a border and unequal amounts of text. This setting keeps all the grid items uniform.