Hover-Animation für Icons

Lektion 12 von 12 im Kurs Untere Navigationsleiste - HTML/CSS Projekt von Coddy.

Fügen wir jedem Icon den Übergangseffekt hinzu. Dafür verwenden wir den :hover CSS-Selektor:

Aufgabe

Einfach

Um einen Hover-Effekt auf einem Icon zu erstellen, kannst du den folgenden CSS-Code hinzufügen (du kannst die Farben anpassen!):

.navigation ul li:hover {
    color: purple;
    transform: scale(1.2);
    background-color: #fff;
    border-radius: 50%;
}

Und schon sind wir fertig! Die Navigationsleiste ist jetzt bereit. Du kannst über jedes Icon in der Navigationsleiste fahren, um den von dir hinzugefügten Übergangseffekt zu sehen.

Viel Spaß beim Codieren !!

Probier es selbst

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
        <script src="script.js"></script>
    </body>
</html>