Image Effects

T3Bootstrap provides a collection of Codrops-inspired image hover effects with overlay text. These are enabled for each image using the field extended_design on sys_file_reference. Effect classes: effect-bubba, -chico, -dexter, -honey, -lily, -milo, -romeo, -roxy, -ruby, -sadie, -sarah.

Tip: Hover your mouse over the images to see the effect.

Hover Effects (Selection)

6 different effects side by side. Clicking does not open the lightbox—the effect itself is the demo.

Lily Effect — Lily
Bild fährt rein, Text bleibt unten

Sadie Effect — Sadie
Verlauf von unten + Text-Wechsel

Roxy Effect — Roxy
Doppelter Border + Slide

Bubba Effect — Bubba
Border-Frame-Animation

Honey Effect — Honey
Dezenter Opacity-Wechsel

All 11 effects

bubba: A double border (top/bottom + left/right) fades in, and the image dims
chico: Border frame scales from 110% to 100%
dexter: Color gradient (blue→brown) + border box from the top
honey: Subtle opacity + text reveal from the bottom
lily: Image slides to the right, text moves upward
milo: Image scrolls to the right; text with border-right appears in the bottom right
romeo: 3D perspective — image comes from behind, X-lines rotate
roxy: Image slides to the right; border frame appears
ruby: Scale-Out + Border-Button with Hover Text
sadie: Dark gradient from the bottom, text color changes
sarah: Underline sweeps in, subtext fades in from the right

Configuration

Where it is maintained: Per image reference in the FAL file edit dialog (TYPO3 backend → CE → Edit Image → "Image Display" tab). Field: extended_design.
DB field: sys_file_reference.extended_design (varchar)
Overlay texts: text_visible (always visible) + text_hover (on hover)
CSS class: figure.effect.effect-{name}
Component key: image in ScssComponents.yaml (loaded automatically when an image with extended_design appears on the page)