Divi-Module Hover Effekt

22. Aug., 2018CSS, Divi Tutorials

# Hover Effekt für alle Divi-Module

Hier zeige ich Dir verschiedene Hover-Effekte wenn Du mit deiner Maus über ein Bild fährst, natürlich geht das auch mit allen anderen “Divi-Modulen”. Für jeden Hover-Effekt gibt es einen eigenen CSS-Code.
Den CSS-Code musst Du entweder in dein “Divi-Child-Theme” unter “Benutzerdefinierte CSS” eintragen, oder in deine “Benutzerdefinierten CSS” einer Seite.
Nun musst Du nur noch die passende “CSS-Klasse” in dein Modul, unter Erweitert –> CSS-ID & Klasse –> CSS-Klasse eintragen und alles speichern.

Viel Spaß beim nachbauen 😉

Beispiele Hover Effekt

“GROW” CSS-Klasse: hvr-grow

CSS-Codes

/* Grow */
.hvr-grow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

CSS-Klassen im Überblick

Shrink

Pulse

Pulse-Grow

Pulse-Shrink

Push

Pop

Bounce-In

Bounce-Out

Rotate

Grow-Rotate

Float

Sink

Bob

Hang

Skew

Skew-Forward

Skew-Backward

Wobble-Vertical

Wobble-Horizontal

Wobble-To-Bottom-Right

Wobble-To-Top-Right

Wobble-Top

Wobble-Bottom

Wobble-Skew

Buzz

Buzz-Out

Forward

Backward

Fade

Back-Pulse

Sweep-To-Right

Sweep-To-Left

Sweep-To-Bottom

Sweep-To-Top

Bounce-To-Right

Bounce-To-Left

Bounce-To-Bottom

Bounce-To-Top

Radial-Out

Radial-In

Rectangle-In

Rectangle-Out

Shutter-In-Horizontal

Shutter-Out-Horizontal

Shutter-In-Vertical

Shutter-Out-Vertical

Border-Fade

Hollow

Trim

Ripple-Out

Ripple-In

Outline-Out

Outline-In

Round-Corners

Underline-From-Left

Underline-From-Center

Underline-From-Right

Overline-From-Left

Overline-From-Center

Overline-From-Right

Reveal

Underline-Reveal

Overline-Reveal

Glow

Shadow

Grow-Shadow

Box-Shadow-Outset

Box-Shadow-Inset

Float-Shadow

Shadow-Radial

Bubble-Top

Bubble-Right

Bubble-Bottom

Bubble-Left

Bubble-Float-Top

Bubble-Float-Right

Bubble-Float-Bottom

Bubble-Float-Left

Icon-Back

Icon-Forward

Icon-Down

Icon-Up

Icon-Spin

Icon-Drop

Icon-Fade

Icon-Float-Away

icon-sink-away

Icon-Grow

Icon-Shrink

Icon-Pulse

Icon-Pulse-Grow

Icon-Pulse-Shrink

Icon-Push

Icon-Pop

Icon-Bounce

Icon-Rotate

Icon-Grow-Rotate

Icon-Float

Icon-Sink

Icon-Bob

Icon-Hang

Icon-Wobble-Horizontal

Icon-Wobble-Vertical

Icon-Buzz

Icon-Buzz-Out

Curl-Top-Left

Curl-Top-Right

Curl-Bottom-Right

Curl-Bottom-Left