Absolute Positionierung mit Pseudoklassen

Schritt 1: Bildunterschriften einblenden

Bauen Sie eine HTML-Seite mit einem div-Container, der ein Bild und einen Absatz (Bildbeschriftung) enthält (HTML-Elemente <div>, <img> und <p>). Die Bildbeschriftung soll im Standardfall nicht angezeigt werden (erste Abbildung). Fährt der Benutzer mit der Maus über das Bild, soll die Bildbeschriftung über dem Bild eingeblendet werden. Beachten Sie: die Box der Bildbeschriftung sollte nicht größer als das Bild sein.

Hinweise:

Die Bildbeschriftung (p) sollte innerhalb ihres Elternelementes (div) absolut positioniert werden.
Standardmäßig ist die Bildbeschriftung (p) ausgeblendet (display: none).
Die Bildbeschriftung soll eingeblendet werden (display: block), wenn der Benutzer mit der Maus über das Elternelement div fährt.
Wenn Sie die Bildbeschriftung transparent gestalten wollen, können Sie ihre "Deckkraft" z.B. auf 80% setzen: opacity: 0.8;.

Schritt 2: Bilder einblenden

Bauen Sie eine HTML-Seite mit einem runden Bild. Im Standardfall ist das Bild verdeckt, z.B. durch eine grüne Einfärbung (erste Abbildung). Klickt der Benutzer mit der Maus das grüne Bild an, soll die Einfärbung durch das verdeckte Bild selbst ersetzt werden (zweite Abbildung).

Hinweis: am einfachsten ist diese Aufgabe zu lösen, wenn Sie drei verschachtelte div-Elemente benutzen:

Das erste div-Element sollte relativ positioniert werden und die beiden anderen div-Elemente enthalten.
Das zweite div-Element ist im ersten div-Element enthalten und hat eine verdeckende Hintergrundfarbe (im Beispiel: grün). Es wird absolut exakt an derselben Stelle wie das dritte div-Element positioniert.
Das dritte div-Element befindet sich im zweiten (grünen) div-Element und hat ein Bild als Hintergrund. Es wird ebenfalls absolut innerhalb des Eltern-Elementes positioniert und ist standardmäßig ausgeblendet.