Animação de hover no ícone

Lição 12 de 12 do curso Barra de Navegação Inferior - Projeto HTML/CSS da Coddy.

Vamos adicionar o efeito de transição em cada ícone. Para isso, usaremos o seletor CSS :hover:

Desafio

Fácil

Para criar um efeito de flutuação em um ícone, você pode adicionar o seguinte código CSS (você pode ajustar as cores!):

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

E estamos prontos! A barra de navegação agora está pronta. Você pode passar o mouse sobre qualquer ícone na barra de navegação para ver o efeito de transição que você adicionou.

Happy Coding !!

Experimente você mesmo

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