How to create icon hover effect using CSS ?
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).
Approach:
1: All the anchor tags are targeted with the CSS declarations (within the braces) being hovered with the mouse cursor.
Syntax:
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.
Syntax:
.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
Syntax:
#target:hover {
transform: scale(1.5);
}
We can also add CSS transitions to make our hover more catchy and decorative.
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 =
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:
Last Updated :
04 May, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...