Lernfabrik

🖱️ CSS Hover-Effekte mit der Pseudoklasse :hover

📥 Arbeitsmaterial herunterladen

📁 209Hover.zip herunterladen
⚠️ WICHTIG: Die ZIP-Datei muss zuerst ENTPACKT werden!
📱 Auf dem iPad:
  1. Auf den Download-Link klicken
  2. In der "Dateien"-App öffnen
  3. Auf die ZIP-Datei tippen → "Entpacken"
  4. Den entpackten Ordner öffnen
  5. Die index.html darin bearbeiten
💻 Auf dem PC/Mac:
  1. Auf den Download-Link klicken
  2. ZIP-Datei speichern
  3. Rechtsklick → "Alle extrahieren" / "Entpacken"
  4. Den entpackten Ordner öffnen
  5. Die index.html im Editor öffnen

Nach dem Entpacken siehst du:
📁 209Hover/ (Hauptordner)
   📄 index.html (die Arbeitsdatei)
   📁 bilder/ (enthält katze.jpg, hund.jpg, fahrrad.jpg, auto.jpg)

📚 Grundlagen: Bilder in CSS einbinden

Bilder werden in CSS mit der Eigenschaft background-image eingebunden:

#element {
    background-image: url('pfad/zum/bild.jpg');
}

Wichtige CSS-Eigenschaften für Hintergrundbilder:

Eigenschaft Bedeutung Beispiel
background-image Bindet das Bild ein url('bilder/katze.jpg')
background-size Bestimmt die Bildgröße cover (füllt immer die Box)
background-position Positioniert das Bild center (zentriert)

Klassen vs. IDs:

In unserem Beispiel: .image-box für beide Boxen, #bild1 und #bild2 für die einzelnen Bilder.

📚 Was ist eine Pseudoklasse?

Im CSS gibt es sogenannte Pseudoklassen. Sie beschreiben einen besonderen Zustand eines Elements.

Die Pseudoklasse :hover ist die wohl bekannteste. Sie tritt ein, wenn der Benutzer mit der Maus über ein Element fährt.

Beispiel:

button {
    background-color: blue;
}

button:hover {
    background-color: red; /* Wird nur aktiv, wenn die Maus drüber ist */
}

👉 Wenn die Maus über dem Button ist, wechselt die Hintergrundfarbe von Blau zu Rot. Geht die Maus weg, wird es wieder blau.

🎯 Heutige Aufgabe: Hover-Effekte für Bilder

Unten siehst du zwei Bild-Container mit den IDs #bild1 und #bild2.

Deine Aufgabe: Du sollst nur den <style>-Bereich verändern und ergänzen.

Bild 1: Katze → Hund

Bild 2: Fahrrad → Auto

📁 Bilder im Verzeichnis:

Im Ordner bilder/ befinden sich:

🖥️ Aufgabe 1: Hover-Effekt konfigurieren

Die Bilder sind schon vorbereitet, aber der CSS-Code ist noch nicht fertig!

Deine Aufgabe: Vervollständige den CSS-Code im <style>-Bereich, sodass:

👉 Teste: Wenn du die Bilder jetzt mit der Maus überfährst, sollten sie wechseln!

🧪 Aufgabe 2: Eigene Hover-Effekte programmieren

Jetzt wird es kreativ! Ergänze das CSS um weitere Effekte:

a) Bilder sollen beim Hover leicht vergrößert werden

Ergänze in .image-box:hover:

.image-box:hover {
    transform: scale(1.05);  /* 5% Vergrößerung */
}

b) Bilder sollen einen sanften Übergang bekommen

Damit die Vergrößerung nicht so ruckartig passiert, ergänze in .image-box:

.image-box {
    /* ... bestehende Eigenschaften ... */
    transition: all 0.3s ease;  /* Sanfter Übergang */
}

c) Ein Schatten-Effekt beim Hover

Füge einen Schatten hinzu:

.image-box:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);  /* Schatten */
}

d) Experimentiere selbst: Was passiert, wenn du...