Hover-Effekte

Wie funktionieren Hover-Effekte?

Der Hover-Effekt lässt sich über CSS definieren. Er wird ausgelöst, wenn der Mauszeiger über ein Element auf der Website fährt. In der Folge zeigt das Element dann eine vordefinierte Änderung an, um den Nutzer darauf aufmerksam zu machen, dass es interaktiv ist. Dieser Effekt trägt im Allgemeinen zur Benutzerfreundlichkeit einer Website bei, da er sie deutlich lebendiger macht.

Anwendungsbeispiele inkl. Erklärung:

Hervorhebung eines Links

Beispiel:

Friedrich-Paulsen-Schule Niebüll

CSS-Befehle:

a {
color: #1E90FF;
text-decoration: none;
border-bottom: 2px solid transparent;
}

a:hover {
color: #B22222;
border-color: #B22222;
}

Erklärung:

Im Grundzustand:

color: #1E90FF
→ Der Link-Text ist blau.
text-decoration: none
→ Entfernt die Standard-Unterstreichung, die Browser normalerweise bei Links anzeigen.
border-bottom: 2px solid transparent
→ Fügt unter dem Text eine unsichtbare Linie hinzu (2 Pixel dick, transparent). Das ist ein Trick, damit beim Hover später kein „Springen“ des Textes entsteht — die Höhe des Elements bleibt gleich, auch wenn die Farbe später sichtbar wird.

Im Hover-Zustand:

color: #B22222
→ Wenn man mit der Maus über den Link fährt, ändert sich die Textfarbe zu einem dunklen Rot.
border-color: #B22222
→ Gleichzeitig wird die zuvor transparente Unterlinie sichtbar – jetzt ebenfalls rot. Das erzeugt den Effekt einer farbigen Unterstreichung beim Hover.

Hervorhebung einer Box

Beispiel:

*siehe diese Box

CSS-Befehle:

box-2 {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

box-2:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

Erklärung:

Im Grundzustand:

transition: transform 0.3s ease, box-shadow 0.3s ease
→ transition: Dieser Befehl sorgt dafür, dass sich Änderungen durch "transform" und "box-shadow" animiert über 0.3 Sekunden abspielen.
→ ease: Die Animation startet und endet weich/unbeschleunigt.

Im Hover-Zustand:

transform: translateY(-10px)
→ Bewegt das Element um 10 Pixel nach oben.
box-shadow: 0 10px 20px rgba(0,0,0,0.2)
→ Fügt einen Schatten hinzu, der nicht nach links oder rechts versetzt ist ("0"), 10 Pixel nach unten versetzt ist ("10px"), verschwommen und unscharf wirkt ("20px") sowie schwarz und sehr durchsichtig erscheint ("rgba(0,0,0,0.2)").

Hervorhebung eines Bildes

Beispiel:

CSS-Befehle:

.zoom-img {
width: 200px;
transition: transform 0.3s ease;
}

.zoom-img:hover {
transform: scale(1.2);
}

Erklärung:

Im Grundzustand:

width: 200px
→ Setzt die Breite des Bildes auf 200 Pixel.
transition: transform 0.3s ease
→ transition: Dieser Befehl sorgt dafür, dass sich Änderungen durch "transform" animiert über 0.3 Sekunden abspielen.
→ ease: Die Animation startet und endet weich/unbeschleunigt.

Im Hover-Zustand:

transform: scale(1.2)
→ Vergrößert das Element auf 120 % seiner Größe.

Wichtig:

Zusätzlich verwende ich in der HTML-Datei die Angabe class="zoom-img" im HTML-Tag des dazugehörigen Bildes (img). Diese Angabe weist dem Bild einen Namen zu, über den es später in der CSS-Datei angesprochen und gestaltet werden kann. Dies ist vor allem dann sinnvoll, wenn man mehrere Bilder auf einer Website hat und nicht alle den Hover-Effekt ausführen sollen. Folglich verwende ich in der CSS-Datei die Zuweisung .zoom-img.