How to use CSS font-size Property In CSS
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.
<!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
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