ThemeKit Array

Slide Over Array

Space Saving Article

A two column grid with text in one column and an image in the other.
Below the breakpoint the text slides over the image with opacity added to its background.
The lazy loaded image is inserted in two size with the smaller one for phones in portrait mode.

Info
ThemeKit Array Slide Over

Slide Over

The slide over has a two column grid layut with adjustable relative column widths and a layout switch function.
Image
The image is inserted in two sizes with the smaller square or portrait image for mobile phones in portrait mode. The images have a lazy loading option and have the option to add a border.

    Mobile Functions

    Below the breakpoint the text block overlays the image with controls for text color, span color and for the background color and its opacity.
    Animation
    The overlay can animate in if required and has controls for the animation time and delay set in milliseconds.
    The animation can occur once or every time the item enters the viewport.
    By default the animation is removed for mobile phones but this can be added if really necessary.

    Image Tags Array

    ThemeKit Array Tags

    Tags

    A two column ajustable width text overlap image array.

    ThemeKit Array Tags 2

    Link

    Optional image link with animated icon.

    Image Tags

    This type of layout provides a change from the usual symetrical arrangement and helps to create "white" spaceto make items more visible. The layout is created failrly easily with the minimum of code using the CSS Grid Laout Module.
    The tags with the heading and text can overlap the image and their vertical position adjusted using the vertical align and vertical adkust controls.

      The images have a lazy loading function and can be configured as internal or external links. The link icon has a hover animation. It appears at the top when the link function is selected and can be positioned left or right.

      © EverWeb Widgets - 2025