Responsive Row Overlay

ThemeKit Row Overlay

Hover FX

The overlay can slide in using 15 different animation types

Row [1]
Image 2

Links

Links are optional and open internal or external pages.

Row [2]
Image 3

Items

The row can have two, three or four items.

Row [3]
Image 4

3 Item Layout

Below the break point item 3 of 3 is centered in row 2.

Row [5]

Responsive Row 2 + 1 + 2

Image 1
Image [1]
360 x 360px
Imaage 2
Image [2]
360 x 360px

ThemeKit Row 2 + 1 + 2

A f4 column, 2 row grid layout with 2 stacked images in columns 1 and 4 and a text section span columns 1 na 2 and rows 1 and 2.
Break Point
Below the break point the column 1 images are inline in row 1, the text is in row 2 and the column 4 images are inline in row 3.
Phones
The item can be reduced to a single column by checking a box.
Image Links
Individual images can be configured as internal links - in this case image [1].

Image 3
Image [3]
360 x 360px
Image 4
Image [4]
360 x 360px

Responsive Row 4 + 4

ThemeKit Row 4 + 4
Image [1]
400 x 400px

Item [1]

Captions

Captions can be align at the top, center or bottom of the image overlay which can appear on hover on computers.

Image 2
Image [2]
400 x 400px

Item [2]

Links are turned on globally and can be configured to open internal or external pages.

Image 3
Image [3]
400 x 400px

Item [3]

The link icons are turned on with the link option and have a control to set the color of the arrow.

Image 4
Image [4]
400 x 400px

Item [4]

Optional Span

Spans for items like date, price, item number can be added on a per item basis.

Responsive Row 1 + 2

ThemeKit Row 1 + 2
Image Link
To Widgets List
Image [2]
Image - No Link

ThemeKit Row 1 + 2

The two column grid has two images stacked in one column and text in the other. The relative widths of the columns can be adjusted.
In this example the left column was given a width of 2fr (fractional units) and the right column 3fr.
The layout can be switched by checking a box and the text can appear above or below the images on screen widths below the break point.

Info