EverWeb Widgets

EverWeb Responsive Stacking Row Widgets [5]

More advanced stacking responsive rows for modern image layouts using overlap, rotate, curve, indent and text blocks.
Click any widget icon to see the demo …

Concave Image Row

Three images are inserted in a row with the center image straight and outer ones angled to create a concave curve at the bottom. At the first break point, image 2 is moved to row 2 and then the images stack on mobile phones.
The images can have an overlay caption and an info link which can open internal or external pages and in a new window if required.

Convex Image Row

Three images are inserted in a row with the center image straight and outer ones angled to create a convex curve at the bottom. At the first break point, image 2 is moved to row 2 and then the images stack on mobile phones.
The optional overlay caption and info links can be set to appear on hover when viewed on computers and on page load when viewed on touch devices.

3 Images & Text Row

A two row grid with three images in HTML5 <figure≶ elements and text in an <article> element. The text section can be placed in anywhere in the grid.
The text is centered in its container and has a heading and a paragraph. The images can have an overlay caption and an info link.

4 Images & Text Row

A two row grid with four images in HTML5 <figure> elements and text in an <article>element. The text section spans 2 rows and can be placed anywhere in the grid.
The text is centered in its container and has a heading and a paragraph. The images can have an overlay caption and an info link.

6 Images & Text Row

This widget creates a grid with four columns and two rows. It has six images and a text section which spans two rows. The text section can be placed anywhere in the grid by giving it specific column and row numbers.
The text is centered in its container and has a heading and a paragraph. The images can have an overlay caption and an info link.

Offset Image Row

When viewed in wider screens, the grid has two rows of three images. One is offset to the left and the other to the right. At the first break point the grid switches to two rows of three images and then to three rows of two on mobile phones. The images can have an overlay caption and an info link which can open internal or external pages and in a new window if required.

Text Overlap Image

The main section has a grid layout with eight columns and three rows. The image occupies five rows and the text section spans three with an overlap onto the image.
The text section can be left or right and can be vertically aligned at the top, center or bottom. Below the break point, the text section overlaps the top or bottom of the image.

Slide Text Overlap Image

The main section has a grid layout with eight columns and three rows. The image occupies five rows and the text section spans three with an overlap onto the image.
The text section can be left or right and can be vertically aligned at the top, center or bottom. It has a slide in animation from the top, right, bottom or left.

2 Image Overlap

The grid has 9 columns and 7 rows when viewed at browser/device widths above the break point.
Each image spans 5 columns to create the horizontal overlap and 4 rows to create the vertical overlap.
The heading and text block are centered horizontally and vertically in the spaces. The background can be a color or an image.

3 Image overlap

The grid has 10 columns and 7 rows when viewed at browser/device widths above the break point.
Each image spans 4 columns to create the horizontal overlap and 3 rows to create the vertical overlap. The images are inserted in an HTML5 <figure> with an overlay caption.
The heading and text block are centered horizontally and vertically in the spaces.

Rotate 3 Image Row

On wide screens, three images are in a row and the angle of each one can be adjust. On tablets, the last image occupies row 2 and is centered. On mobile phones, all the images are stacked.
The images can have an overlay caption and an info link with a new window option. These can be set to appear on hover on computers.

Rotate 4 Image Row

A four image row where the odd and even numbered images can be given different rotation angles. The images form two rows on tablets and stack vertically on mobile phones.
The images can have an overlay caption and an info link with a new window option. These can be set to appear on hover on computers.

© EverWeb Widgets -