Skip to content
Related Articles

Related Articles

Improve Article

How to create icon hover effect using CSS ?

  • Last Updated : 13 Jul, 2021

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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • 1: All the anchor tags are targeted with the CSS declarations (within the braces) on 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);
    }

To make our hover more catchy and decorative, we can also add CSS transitions to it. 

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 in understanding the hover effect to 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: 




My Personal Notes arrow_drop_up
Recommended Articles
Page :