GSAP Image Hover List
Show off projects or products as a clean list that reveals each image on hover.
An agency-style list of rows — title, subtitle, meta and link — where hovering a row reveals its image, animated with GSAP: following the pointer smoothly, in a fixed panel beside the list, opening inside or below the row, tumbling in beside the row as a picture card, or tilting with the pointer's speed.
Elementor widget
Requirements
- Elementor 3.5 or newer
- WordPress 6.2 or newer
- PHP 7.4 or newer
- Moduly with GSAP built in (the release after 0.4.2). On an older Moduly each row shows a small thumbnail instead.
Add it to a page
- Edit the page with Elementor.
- In the widget panel, search for GSAP Image Hover List. GSAP widgets sit in the Moduly · GSAP category and carry the Moduly badge.
- Drag it onto the page.
- Add your rows in the Content tab, style them in the Style tab.
Settings
Rows
| Setting | What you can set |
|---|---|
| Rows | Title, subtitle, badge (a short label after the title), meta (a year, category or price; one line per line break), link and image for each row. Under Opens Below the Row: details text, button text and button link (empty uses the row's link) for the below-the-row style |
| Title Tag | H2–H6, div, span or p |
| Show Numbers | 01, 02, 03… before each title |
| 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 (each row's own card pops in at an angle and spins away) · Image opens below the row (a panel with the image, details and button slides open) |
| Image Position | Follow and tilt: centred on the pointer or beside it |
| Follow Smoothness | Follow and tilt: higher trails further behind the pointer |
| Tilt Amount | Tilt: how far the image leans when the pointer moves fast. Tumble: how far the card turns |
| Card Position Across the Row | Tumble: where the card's left edge sits (default 62%), per device |
| Image Appears With | Scale in · Wipe up · Fade (follow, tilt and panel) |
| Show the First Image Before Hover | Panel: fills the panel before anyone hovers |
| Panel Side | Panel: left or right of the list |
| On Touch Screens | Show a thumbnail in every row (default), or first tap previews, second tap opens — a tap elsewhere closes the preview |
Row Hover
| Setting | What you can set |
|---|---|
| Draw an Underline | The title is underlined from left to right |
| Slide the Title In | How far the title moves in, per device |
| Dim the Other Rows | Fades the rows that aren't hovered; Dimmed Opacity sets how much |
| Blur the Other Rows | Blurs the rows that aren't hovered, 0–10 px (0 = off) |
Style
Rows (padding, dividers with colour and weight, text colour and background, both normal and on hover), Text (title, subtitle, meta and number colours and typography; title colour on hover; arrow colour normal and on hover; badge text and background; for the below-the-row style the details typography and button colours, normal and on hover), Image (width of the following or in-row image, height in the row, panel width, aspect ratio, corner radius, shadow, and the thumbnail size used on touch screens).
Good to know
- With the fixed panel, in-row, tumble and below-the-row styles, keyboard focus on a row shows its image too. Rows without a link can still be reached with the Tab key.
- Images are decorative (empty alt text) because the row's title already names them.
- Touch screens have no hover, so by default each row shows a small thumbnail instead. Choose first tap previews, second tap opens under On Touch Screens to play the effect on a tap.
- Visitors who ask their device for reduced motion see the thumbnails too; the fixed panel and the below-the-row panel still open, without motion.
- With the below-the-row style and no hover (touch thumbnails, or no JavaScript), each row's details and button stay visible under it.
- Without JavaScript (or on an older Moduly) the list shows with thumbnails and every link works.