How to create icon hover effect using CSS ?
Last Updated :
23 Jul, 2025
To style an icon's color, size, and shadow using CSS, use the color property to set the icon's color, font size to adjust its size, and text-shadow or box-shadow for adding shadow effects, creating a visually appealing and dynamic look.
Using: hover Pseudo-Class
Using the: hover pseudo-class, you can apply styles like transformations or color changes when an element is hovered over. It's triggered when the user hovers over the element, creating interactive visual effects.
Syntax
selector:pseudo-class {
property: value;
}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 understand the hover effect on 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:
