Animación hover en el icono

Lección 12 de 12 del curso Barra de navegación inferior - Proyecto de HTML/CSS de Coddy.

Añadamos el efecto de transición en cada icono. Para lo cual utilizaremos el selector CSS :hover:

Desafío

Fácil

Para crear un efecto de desplazamiento (hover) en un icono, puedes añadir el siguiente código CSS (¡puedes ajustar los colores!):

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

¡Y ya está todo listo! La barra de navegación ya está preparada. Puedes pasar el cursor sobre cualquier icono de la barra de navegación para ver el efecto de transición que has añadido.

¡Feliz codificación!

Pruébalo tú mismo

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