Breakdance: Interaktiver Maus-Schatten – so baust du den genialen Hover-Effekt

Webdesign,

Was macht dieser Effekt?

Wenn ein Besucher mit der Maus über einen Container auf deiner Website fährt, erscheint ein weicher, kreisförmiger Schatten, der der Maus folgt. Der Effekt ist subtil und elegant – er wirkt wie ein sanfter Lichtschimmer im Hintergrund und gibt deiner Seite eine hochwertige, interaktive Note.

Du kannst zwischen einem dunklen Schatten und einem hellen Schein wählen, je nachdem ob dein Container einen hellen oder dunklen Hintergrund hat.

 

 

Schritt 1: CSS einfügen

 

Öffne in deinem WordPress-Backend den Breakdance Builder und navigiere zu Breakdance → Settings → Custom Code. Erstelle dort einen neuen Eintrag und wähle als Position Header aus. Füge folgenden CSS-Code ein und umschließe ihn mit <style> Tags:

<style>
/*
 * AUTOR: MN
 * DATUM: 2026-02-19
 * BESCHREIBUNG: Subtiler, eleganter Maus-Schatten mit dynamischem Radius.
 * Weicher Verlauf, dezente Deckkraft – wirkt atmosphärisch im Hintergrund.
 * Radius: 65% der kürzeren Container-Seite.
 */

.mouse-shadow-box {
  position: relative;
  overflow: hidden;
  --mouse-x: 50%;
  --mouse-y: 50%;
  --shadow-radius: 300px;
}

.mouse-shadow-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mouse-shadow-box:hover::after {
  opacity: 1;
}

/* Dunkler Schatten – für helle Hintergründe */
.mouse-shadow-box.shadow-dark-effect::after {
  background: radial-gradient(
    circle var(--shadow-radius) at var(--mouse-x) var(--mouse-y),
    rgba(0, 0, 0, 0.10) 0%,
    rgba(0, 0, 0, 0.04) 45%,
    rgba(0, 0, 0, 0) 100%
  );
}

/* Heller Schein – für dunkle Hintergründe */
.mouse-shadow-box.shadow-light-effect::after {
  background: radial-gradient(
    circle var(--shadow-radius) at var(--mouse-x) var(--mouse-y),
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.04) 45%,
    rgba(255, 255, 255, 0) 100%
  );
}
</style>

 

Schritt 2: JavaScript einfügen

 

Navigiere im Breakdance Builder zu Breakdance → Settings → Custom Code. Erstelle einen weiteren Eintrag und wähle als Position Global aus. Das ist wichtig, denn Breakdance rendert seine Elemente dynamisch – das Script muss daher als Global eingebunden werden, damit es die Elemente zuverlässig findet. Füge folgenden JavaScript-Code ein und umschließe ihn mit <script> Tags:

<script>
/*
 * AUTOR: MN
 * DATUM: 2026-02-19
 * BESCHREIBUNG: Maus-Schatten mit MutationObserver für Breakdance Builder.
 * Direkte 1:1 Mausverfolgung, dynamische Radius-Berechnung,
 * WeakSet gegen Doppelbindung.
 * Radius: 65% der kürzeren Container-Seite.
 */

(function() {

  // ========================================================
  // TUNING-PARAMETER:
  // ========================================================
  const RADIUS_ANTEIL = 0.65;
  // ========================================================

  const initialisierteBoxen = new WeakSet();

  function boxInitialisieren(box) {
    if (initialisierteBoxen.has(box)) return;
    initialisierteBoxen.add(box);

    function radiusBerechnen() {
      const rect = box.getBoundingClientRect();
      const radius = Math.min(rect.width, rect.height) * RADIUS_ANTEIL;
      box.style.setProperty('--shadow-radius', `${radius}px`);
    }

    radiusBerechnen();
    window.addEventListener('resize', radiusBerechnen);

    box.addEventListener('mousemove', (e) => {
      const rect = box.getBoundingClientRect();
      box.style.setProperty('--mouse-x', `${e.clientX - rect.left}px`);
      box.style.setProperty('--mouse-y', `${e.clientY - rect.top}px`);
    });

    box.addEventListener('mouseenter', radiusBerechnen);
  }

  function alleSuchen() {
    document.querySelectorAll('.mouse-shadow-box').forEach(boxInitialisieren);
  }

  alleSuchen();

  setTimeout(alleSuchen, 500);
  setTimeout(alleSuchen, 1500);
  setTimeout(alleSuchen, 3000);

  const observer = new MutationObserver(() => {
    alleSuchen();
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });

})();
</script>

 

Schritt 3: CSS-Klassen im Breakdance Builder zuweisen

 

Jetzt musst du dem Container, der den Effekt erhalten soll, die richtigen CSS-Klassen geben. So geht’s:

Öffne die Seite im Breakdance Builder und klicke auf den Container (oder die Section, das Div – jedes Block-Element funktioniert), auf dem der Schatten erscheinen soll. Navigiere im rechten Panel zu Advanced → CSS Classes.

Dort trägst du zwei Klassen ein, getrennt durch ein Leerzeichen:

Für einen dunklen Schatten auf hellem Hintergrund:

mouse-shadow-box shadow-dark-effect

Für einen hellen Schein auf dunklem Hintergrund:

mouse-shadow-box shadow-light-effect

Das war’s! Speichere die Seite und teste den Effekt im Frontend, indem du mit der Maus über den Container fährst.

 

Effekt anpassen – Farbe, Deckkraft und Größe

 

Deckkraft ändern

Die Deckkraft wird im CSS über die rgba-Werte gesteuert. Der vierte Wert in der Klammer ist die Deckkraft. Im folgenden Beispiel siehst du die drei Farbstufen des Gradienten:

rgba(0, 0, 0, 0.10) 0%      /* Kern – die letzte Zahl ist die Deckkraft */
rgba(0, 0, 0, 0.04) 45%     /* Übergang */
rgba(0, 0, 0, 0) 100%       /* Rand – immer 0 (unsichtbar) */

Willst du den Schatten stärker sichtbar machen, erhöhe die Werte:

rgba(0, 0, 0, 0.20) 0%      /* Kern deutlich sichtbar */
rgba(0, 0, 0, 0.08) 45%     /* Stärkerer Übergang */
rgba(0, 0, 0, 0) 100%

Willst du ihn noch subtiler, senke die Werte:

rgba(0, 0, 0, 0.06) 0%      /* Kern kaum sichtbar */
rgba(0, 0, 0, 0.02) 45%     /* Sehr sanfter Übergang */
rgba(0, 0, 0, 0) 100%

Die Spanne geht von 0 (unsichtbar) bis 1 (volle Deckkraft). Für diesen Effekt empfehle ich Werte zwischen 0.05 und 0.25 für den Kern.

 

Farbe ändern

Die Farbe steckt in den ersten drei Zahlen der rgba-Werte. Das Format ist rgba(Rot, Grün, Blau, Deckkraft) mit Werten von 0 bis 255.

Du kannst eine komplett eigene Farbvariante erstellen, indem du einen neuen Block im CSS ergänzt. Hier ein Beispiel für einen blauen Schatten:

/* Blauer Schatten – eigene Farbe */
.mouse-shadow-box.shadow-blue-effect::after {
  background: radial-gradient(
    circle var(--shadow-radius) at var(--mouse-x) var(--mouse-y),
    rgba(0, 100, 255, 0.10) 0%,
    rgba(0, 100, 255, 0.04) 45%,
    rgba(0, 100, 255, 0) 100%
  );
}

Die CSS-Klassen im Breakdance wären dann mouse-shadow-box shadow-blue-effect. Hier einige Farbbeispiele als Orientierung:

Rot:     rgba(255, 0, 0, 0.10)
Grün:    rgba(0, 180, 0, 0.10)
Blau:    rgba(0, 100, 255, 0.10)
Gold:    rgba(255, 185, 0, 0.10)
Violett: rgba(140, 0, 255, 0.10)

 

Größe ändern

Die Größe des Schattens wird im JavaScript über den RADIUS_ANTEIL gesteuert. Du findest ihn ganz oben im Script im Bereich “Tuning-Parameter”:

const RADIUS_ANTEIL = 0.65;

Dieser Wert bedeutet: Der Schatten-Radius ist 65% der kürzeren Seite des Containers. Einige Richtwerte:

0.3  = Kleiner, fokussierter Schatten (30%)
0.5  = Mittlerer Schatten (50%)
0.65 = Aktueller Wert – groß und weich (65%)
0.8  = Sehr großer Schatten (80%)
1.0  = Schatten so groß wie der halbe Container (100%)

Je größer der Container, desto größer wird der Schatten automatisch. Bei einem 600px hohen Container mit RADIUS_ANTEIL = 0.65 wäre der Radius zum Beispiel 390px.

 

Warum Global und nicht Footer?

Breakdance Builder rendert seine Elemente dynamisch ins DOM. Das bedeutet, dass die HTML-Elemente zum Zeitpunkt des klassischen DOMContentLoaded Events oft noch gar nicht existieren. Ein Script im Footer würde die Container nicht finden, weil Breakdance sie erst danach einfügt.

Die Position Global zusammen mit dem MutationObserver im Script löst dieses Problem: Der Observer überwacht das gesamte DOM dauerhaft auf Änderungen. Sobald Breakdance einen Container mit der Klasse mouse-shadow-box in die Seite einfügt, erkennt das Script ihn sofort und aktiviert den Effekt. Die zusätzlichen setTimeout-Fallbacks nach 500ms, 1500ms und 3000ms fangen Sonderfälle ab, in denen der Observer nicht schnell genug reagiert.

 

Gut zu wissen

Der Effekt funktioniert nur auf Desktop-Geräten, da er die Mausposition benötigt. Auf Smartphones und Tablets passiert nichts – der Container sieht ganz normal aus, ohne sichtbare Veränderung.

Du kannst den Effekt auf beliebig vielen Containern gleichzeitig verwenden. Jeder Container berechnet seinen eigenen Radius basierend auf seiner Größe. Du kannst auch verschiedene Container mit unterschiedlichen Effekten mischen – einer mit shadow-dark-effect, ein anderer mit shadow-light-effect und ein dritter mit einer eigenen Farbe.

Der Effekt beeinflusst keine Klicks. Die Zeile pointer-events: none im CSS sorgt dafür, dass der Schatten-Layer komplett durchlässig für Mausklicks ist. Buttons, Links und andere klickbare Elemente innerhalb des Containers funktionieren ganz normal.

Performance: Das Script nutzt kein rechenintensives Easing oder Animationsschleifen. Die Mausposition wird direkt per mousemove Event an CSS-Variablen weitergereicht. Der Browser erledigt das Rendering des Gradienten hardwarebeschleunigt – auch auf älteren Rechnern kein Problem.

Recommended for you