Image Hover Effect (Divi)

An image whose caption comes in on hover, for Divi 5 — 22 effects, all CSS. Hover each card (or tab to it with the keyboard); on phones the finished state shows. Each card is labelled with its effect and settings.

1. Twenty-two effects

Effect & Layout → Hover Effect. Lines & Frames colour for the drawn effects; Panel / Bar Colour for the panel, side, push, curtain and cinema effects; some cards add a Link Text with an arrow.

Corners — brackets draw from two corners

Side panel — slides in from the left

Curtain — two halves close from the sides

Cinema — letterbox bars slide in

Tilt — the photo turns and zooms

Caption line — the title underlines, text opens

Glass — a frosted card appears

2. Shape, crop and text position

Shape: aspect ratio (1:1, 16:9, 2:3), fixed height (320 px, 240 px on phones) or the image’s own shape · crop focus · text alignment and vertical position per device (left/bottom on desktop, centre on phones).

Portrait 2 : 3

Max width 280 px, centred

3. Colours, filters and motion

Overlay colour normal and on hover, opacity · title, highlight, description and link colours on hover · image grayscale, brightness and blur, and a hover zoom · lift on hover with a box shadow · speed.

Grayscale 100 % → 0 %, zoom 115 %

A link over the whole card, new tab

4. Styled from the Design tab, on a dark background

Title font 30 px with a highlight in a light weight, description and link fonts, a 2 px border and radius on the box, the caption padding 40 px.

Duotone