How to use CSS Scaling Transformation In CSS
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.
<!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:
Output
How to Zoom Social Icon on Hover ?
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