Animation on hover Icon

Lesson 12 of 12 in Coddy's Bottom Navigation Bar - HTML/CSS Project course.

Let's add the transition effect on each icon. For which we will use the :hover CSS selector:

Challenge

Easy

To create a hovering effect on an icon, you can add the following CSS code (you can adjust the colors!):

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

And we're all set! The navigation bar is now ready. You can hover over any icon on the navigation bar to see the transition effect that you have added.

Happy Coding !!

Try it yourself

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