Open In App

How to create icon hover effect using CSS ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

CSS: hover Selector: The: hover selector (or CSS pseudo-class) matches when the user interacts with an element with a pointing device. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).

Approach:

1: All the anchor tags are targeted with the CSS declarations (within the braces) being hovered with the mouse cursor. 

Syntax:

a:hover {
    css declarations;
}

2: Tags with the class name “icon” has been targeted to change their background color to blue, on being hovered with the mouse cursor.

Syntax:

.icon:hover {
    background-color: blue;
} 

3: The targeted element with the ID “target” will be transformed to a scale of 1.5 on being hovered. Refer CSS scale 

Syntax:

#target:hover {
    transform: scale(1.5);
}

We can also add CSS transitions to make our hover more catchy and decorative. 

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=
        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>


Output: 



Last Updated : 04 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads