Skip to content
Related Articles

Related Articles

How to create icon hover effect using CSS ?

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 13 Jul, 2021
Improve Article
Save Article

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).


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



    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.


    .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 


    #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. 


<!DOCTYPE html>
<html lang="en" dir="ltr">
    <meta charset="utf-8">
    <script src=
        .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;
    <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 class="link twitter">
            <i class="fab fa-2x fa-twitter"></i>
        <a class="link github">
            <i class="fab fa-2x fa-github"></i>
        <a class="link instagram">
            <i class="fab fa-2x fa-instagram"></i>
        <a class="link youtube">
            <i class="fab fa-2x fa-youtube"></i>
        <a class="link facebook">
            <i class="fab fa-2x fa-facebook-f"></i>


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!