GSAP Image Hover List

A list of projects, products or links whose picture appears as the visitor hovers each row.

Rows that reveal their image on hover, animated with GSAP — following the pointer, tilting with its speed, in a fixed panel beside the list, opening inside or below the row, or tumbling in beside it as a picture card — with an underline, a slide and dimmed neighbours. Touch screens get a thumbnail in every row. The block counterpart of the GSAP Image Hover List Elementor widget.

Gutenberg block

Requirements

The block editor (Gutenberg)
WordPress 6.5 or newer
PHP 7.4 or newer
Moduly with GSAP built in (the release after 0.4.2). On an older Moduly every row shows its thumbnail instead.

Add it to a page

Open the page or post in the block editor.
Click + and search for GSAP Image Hover List — it is in the Moduly · GSAP category.
Fill in the rows in the right sidebar under Rows (title, subtitle, meta, link and image), or add several pictures at once with Add images.
Presets (panel, tilt) are under Transform to; two patterns (projects, menu with a picture panel) are in the Moduly pattern category.

Hovering a row on the canvas shows its image just as on the page; clicks on links are ignored while editing.

Settings

Rows

Setting	What you can set
Rows	Title, subtitle, meta (a year, a category or a price; one line per line break), badge (a short label after the title), link and image for each row; reorder or remove them. With the below-the-row style also details text, button text, button link (empty uses the row's link) and a new-tab switch

Content

Setting	What you can set
Title tag	H2–H6, div, span or p
Show numbers	01, 02, … before each row
Show arrow	An arrow at the end of each row that turns on hover
Arrow shape	Arrow (turns up) · Diagonal arrow · Chevron · Plus (turns to a cross)
Image resolution	Medium to Full

Hover effect

Setting	What you can set
Style	Image follows the pointer · Image in a fixed panel · Image opens inside the row · Image follows and tilts with speed · Image tumbles in beside the row · Image opens below the row
Image position	Follow and tilt: centred on the pointer or beside it
Follow smoothness	1–10: higher trails further behind the pointer
Tilt amount	Tilt and tumble: 1–10
Card position across the row	Tumble: 0–90 % (where the card's left edge sits)
Image appears with	Scale in · Wipe up · Fade (follow, tilt and panel)
Show the first image before hover	Panel
Panel side	Panel: left or right
On touch screens	Show a thumbnail in every row, or first tap previews, second tap opens

Row hover

Setting	What you can set
Draw an underline	Under the hovered title
Slide the title in	0–80 px
Dim the other rows	With the dimmed opacity (0.1–0.9)
Blur the other rows	0–10 px (0 = off)

Row style, image and colours

Row padding, dividers and their weight, title size; image width (follow, tilt and row), height in the row, panel width, aspect ratio, corner radius and the touch-screen thumbnail size; text and background colours (normal and hover), subtitle, meta, number and divider colours, title on hover, arrow (normal and hover), badge text and background; button colours (normal and hover) for the below-the-row style.

Styles tab: text and background colour, typography (font family, weight, line height, letter spacing, case) and spacing. Wide and full width alignments are supported.

Good to know

Rows without a link are still focusable, so keyboard visitors can bring up the image in the panel, row, tumble and below-the-row styles.
Touch screens have no hover, so by default each row shows a small thumbnail (or set On touch screens to play the effect on a tap). Visitors who ask for reduced motion see the thumbnails too (the fixed panel and the below-the-row panel still open, without motion). Without JavaScript the thumbnails show as well; with the below-the-row style each row's details and button stay visible.
Images are decorative: each row's title names it for screen readers.