How to create icon hover effect using CSS ?

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:
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;
}
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;
} 
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);
}
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="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>
Output: 
CSS-Properties
CSS-Questions
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.