Bildeffekte

T3Bootstrap liefert eine Sammlung von Codrops-inspirierten Bild-Hover-Effekten mit Overlay-Text. Aktiviert pro Bild über das Feld extended_design auf der sys_file_reference. Effekt-Klassen: effect-bubba, -chico, -dexter, -honey, -lily, -milo, -romeo, -roxy, -ruby, -sadie, -sarah.

Tipp: Maus über die Bilder bewegen für den Effekt.

Hover-Effekte (Auswahl)

6 verschiedene Effekte nebeneinander. Klick öffnet die Lightbox nicht aktiv — der Effekt selbst ist das Demo.

Lily-Effekt

Lily

Bild fährt rein, Text bleibt unten

Sadie-Effekt

Sadie

Verlauf von unten + Text-Wechsel

Roxy-Effekt

Roxy

Doppelter Border + Slide

Bubba-Effekt

Bubba

Border-Frame-Animation

Honey-Effekt

Honey

Dezenter Opacity-Wechsel

Ruby-Effekt

Ruby

Scale-Zoom + Frame

Alle 11 Effekte

bubba

Doppelter Border (oben/unten + links/rechts) wischt ein, Bild dimmt

chico

Border-Frame skaliert von 110% auf 100%

dexter

Color-Gradient (blau→braun) + Border-Box von oben

honey

Subtle Opacity + Text-Reveal von unten

lily

Bild schiebt nach rechts, Text wandert nach oben

milo

Bild scrollt nach rechts, Text mit Border-Right rechts unten

romeo

3D-Perspektive — Bild kommt von hinten, X-Linien rotieren

roxy

Bild schiebt nach rechts, Border-Frame erscheint

ruby

Scale-Out + Border-Button mit Hover-Text

sadie

Dunkler Verlauf von unten, Text-Color wechselt

sarah

Underline wischt rein, Sub-Text fadet von rechts

Konfiguration

Wo gepflegt

Pro Bild-Referenz im FAL-Datei-Edit-Dialog (TYPO3-Backend → CE → Bild bearbeiten → Tab „Bilddarstellung"). Feld: extended_design.

DB-Feld

sys_file_reference.extended_design (varchar)

Overlay-Texte

text_visible (immer sichtbar) + text_hover (beim Hover)

CSS-Klasse

figure.effect.effect-{name}

Component-Key

image in ScssComponents.yaml (wird automatisch geladen, wenn ein Bild mit extended_design auf der Seite erscheint)