Title Tips (Divi)

A list of big titles for Divi 5 that reveals an image when a title is hovered, focused with the keyboard or tapped. Each title is a Title child module with its own image, description, side text, link and accent colour. Every example below is labelled with its settings — move the mouse over the titles.

1. Image following the cursor

Image Shows: Following the cursor · tilt with the movement · Zoom in · numbered titles · side text at the end of the row (prices) · descriptions with the image · underline draws in from the left · the other titles fade to 30 %.

2. Image beside the title

Left: Beside the title (right of the text) · Text rolls up · Wipe reveal · description opens under the title · 200 × 240 px images, 40 px from the title. Right: tip at the right edge of the list · Line through (4 px) · Blur in · side text raised after the title.

3. Side panel that swaps

In a side panel (right, 45 % wide) · the first image shows before any hover · Colour fills in · Fade · descriptions under the panel image · 460 px image height (300 px on phones, where the panel moves above the list).

4. Text only

Left: Image Shows: Nowhere · Line through · descriptions always under the title · centred · no lines between titles · side text right after the title. Right: Slides sideways · Colour change only on hover with a red accent per row · 10 px row padding, H4 titles.

5. Finished designs

An index on a dark background: panel on the left (40 %), Flip in, numbered, per-row accent colours, a dark row hover background, 0.15 faded opacity, white serif titles, gold side text, grey lines, images with a 24 px radius, a gold border and a shadow, slightly desaturated. Speed 700 ms.