How to create icon hover effect using CSS ?

Last Updated : 10 Oct, 2024

To style an icon's color, size, and shadow using CSS, use the color property to set the icon's color, font size to adjust its size, and text-shadow or box-shadow for adding shadow effects, creating a visually appealing and dynamic look.

Using: hover Pseudo-Class

Using the: hover pseudo-class, you can apply styles like transformations or color changes when an element is hovered over. It's triggered when the user hovers over the element, creating interactive visual effects.

Syntax

selector:pseudo-class {
    property: value;
}

Example: We have used the: hover selector and a combination of various CSS to create a hover effect on social media icons. This project will surely help you understand the hover effect on a deeper level.

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <script src=
"https://kit.fontawesome.com/457a315592.js" crossorigin="anonymous">
    </script>

    <style>
        .container {
            background-color: green;
            height: 20vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .link {
            height: 70px;
            width: 70px;
            background-color: #caf7e3;
            border-radius: 35px;
            text-align: center;
            margin: 7px;
            line-height: 80px;
        }

        a i {
            transition: all 0.3s linear;
        }

        a:hover i {
            transform: scale(1.5);
        }

        .youtube:hover {
            color: red;
        }

        .facebook:hover {
            color: blue;
        }

        .instagram:hover {
            color: #e11d74;
        }

        .twitter:hover {
            color: #00adb5;
        }

        .github:hover {
            color: black;
        }

        .linkedin:hover {
            color: #04009a;
        }
    </style>
</head>

<body>
    <p>GFG social media link icons (Hover over the icon)</p>

    <div class="container">
        <a class="link linkedin">
            <i class="fab fa-2x fa-linkedin"></i>
        </a>
        <a class="link twitter">
            <i class="fab fa-2x fa-twitter"></i>
        </a>
        <a class="link github">
            <i class="fab fa-2x fa-github"></i>
        </a>
        <a class="link instagram">
            <i class="fab fa-2x fa-instagram"></i>
        </a>
        <a class="link youtube">
            <i class="fab fa-2x fa-youtube"></i>
        </a>
        <a class="link facebook">
            <i class="fab fa-2x fa-facebook-f"></i>
        </a>
    </div>
</body>

</html>