Hover-Effekte

Die Hover-Effekte kommen zur Anwendung, wenn die Maus über das Element bewegt wird.

Sofern die Effekte noch nicht installiert sind, installieren Sie sie bitte über die + Schaltfläche im Effekte-Auswahldialog.

Die Hover-Effekte sind über CSS-Stilklassen realisiert. Jedes Element erhält die Stilklasse hover-effects und den Namen des Effekts zugewiesen. Einzelne Parameter können über CSS-Variable übersteuert werden.

Um hier Änderungen vorzunehmen sind gute CSS-Kenntnisse erforderlich.

Allgemine Einstellungen:

--effekt-time

--effekt-easing

--effekt-deleay

--effekt-transform-origin

Normaldarstellung:

--effekt-transform-normal

--effekt-opacity-normal

--effekt-filter-normal

Hoverdarstellung:

--effekt-transform-hover

--effekt-opacity-hover

--effekt-filter-hover

bearbeiten eines Effekts: (am Beispiel des grayscale-Effekts)

1. Öffnen Sie im orangen Menü "globale Stilklassen"
2. wählen Sie den Effekt (hover-effects.grayscale) aus
3. bearbeiten Sie die Einstellungen

(eine bebilderte Schritt-für-Schritt Anleitung finden Sie unter Scroll-In-Effekte)

Um einen eigenen Effekt zu erzeugen, benennen Sie ihn mit hover-effects.<name>

Der erste Teil des Namens hover-effects. ist verpflichtend, der Teil nach dem Punkt kann frei vergeben werden.

Weisen Sie den Stilvariablen Ihre gewünschten Werte zu.

--effekt-transform-origin: center center;

--effekt-transform-normal: none;
--effekt-opacity-normal: 1;
--effekt-filter-normal: grayscale(0);

--effekt-transform-hover: none;
--effekt-opacity-hover: 1;
--effekt-filter-hover: grayscale(1);