Animated Links

This widget creates rows of three content blocks. Each widget can create a grid with up to 48 blocks. The blocks are inserted in a wrapper inside a full width container. The wrapper has a setting for maximum width.
At wide browser settings, the blocks will spread out. As the browser or device width is reduced, the space between the blocks is decreased. Like the other Hero widgets, they remain responsive down to the width of an iPad in portrait mode.
When viewed on a computer, a square image will become round on hover, a rectangular image will become oval and a caption with a transparent background appears in the center of the image. When viewed on a tablet device, the round mask and the caption are displayed on page load.
The images can be configured as internal or external links which can be set to open in a new window if required.
The caption can use a web safe font or non web safe or Google hosted font with a web safe fallabck.
The images should all be cropped to the same size before importing into EverWeb. An image width of 240px is ideal.