How to Zoom Social Icon on Hover ?

Last Updated : 22 Mar, 2024

Implementing a zoom effect on social icons during hover improves their appearance on websites, creating a more engaging user experience. This effect can be achieved using different methods, such as CSS scaling and adjusting the font-size property.

These are the following approaches:

Table of Content

Using CSS Scaling Transformation
Using CSS font-size Property
Using CSS zoom Property

Using CSS Scaling Transformation

In this approach, we are using CSS Scaling Transformation to zoom social icons on hover. The transform: scale(1.3) property enlarges the icons by 1.3 times their original size when hovered over.

Syntax:

.social-icons a:hover {
    transform: scale(VALUE);
}

Example: The below example uses CSS Scaling Transformation to zoom the social icon on hover.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>CSS Scaling Transformation</title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        body {
            text-align: center;
        }

        .social-icons {
            display: flex;
            justify-content: center;
            gap: 60px;
            margin-top: 20px;
        }

        .social-icons a {
            font-size: 50px;
            transition: transform 0.3s ease;
        }

        .social-icons a:hover {
            transform: scale(1.3);
        }

        .fa-facebook {
            color: blue;
        }

        .fa-twitter {
            color: black;
        }

        .fa-instagram {
            color: red;
        }
    </style>
</head>

<body>
    <h3>Using CSS Scaling Transformation</h3>
    <div class="social-icons">
        <a href="#">
          <i class="fab fa-facebook"></i>
          </a>
        <a href="#">
          <i class="fab fa-twitter"></i>
          </a>
        <a href="#">
          <i class="fab fa-instagram"></i>
          </a>
    </div>
</body>

</html>

Output:

Zoom icons using css scale transformation

Output

Using CSS font-size Property

In this approach, we are using the CSS font-size property to control the size of social icons. When we hover, icons increase the font size using transitions, creating a zoom effect on the icons.

Syntax:

.social-icons .fa-youtube:hover {
     font-size: your_value;
}

Example: The below example uses the CSS font-size Property to zoom the social icon on hover.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Using CSS font-size Property</title>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        .social-icons {
            display: flex;
            justify-content: center;
            gap: 20px;
        }

        .social-icons a {
            font-size: 24px;
            transition: font-size 0.3s ease;
            color: black;
        }

        .social-icons .fa-github {
            font-size: 24px;
            color: #333;
        }

        .social-icons .fa-github:hover {
            font-size: 40px;
        }

        .social-icons .fa-linkedin {
            font-size: 24px;
            color: #0077B5;
        }

        .social-icons .fa-linkedin:hover {
            font-size: 34px;
        }

        .social-icons .fa-youtube {
            font-size: 24px;
            color: #FF0000;
        }

        .social-icons .fa-youtube:hover {
            font-size: 30px;
        }

        h3 {
            text-align: center;
        }
    </style>
</head>

<body>
    <h3>Using CSS font-size Property</h3>
    <div class="social-icons">
        <a href="#">
          <i class="fab fa-github"></i>
          </a>
        <a href="#">
          <i class="fab fa-linkedin"></i>
          </a>
        <a href="#">
          <i class="fab fa-youtube"></i>
          </a>
    </div>
</body>

</html>

Output:

Output

Using CSS zoom Property

In this approach, we are using CSS zoom property to control social icons on hover. The zoom property enlarges the icons size by 1.3 times the original size when hovered over.

Syntax:

.social-icons a:hover {
    zoom: 1.3;
}

Example: The below example uses the CSS zoom Property to zoom the social icon on hover.

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zoom Social Icon on Hover</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        body {
            text-align: center;
        }
        .social-icons {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 20px;
        }
        .social-icons a {
            transition: transform 0.4s ease;
        }
        .social-icons a:hover {
            zoom: 1.3;
        }

        .fa-telegram {
            color: skyblue;
        }

        .fa-linkedin {
            color: blue;
        }

        .fa-whatsapp {
            color: green;
        }
    </style>
</head>

<body>
    <h5>Using CSS zoom Property</h5>
    <div class="social-icons">
        <a href="#" class="social-icon">
            <i class="fab fa-telegram"></i>
        </a>
        <a href="#" class="social-icon">
            <i class="fab fa-linkedin"></i>
        </a>
        <a href="#" class="social-icon">
            <i class="fab fa-whatsapp"></i>
        </a>
    </div>
</body>

</html>