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 = "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:
Contact Us