Skip to content
Related Articles

Related Articles

Improve Article

How to create icon hover effect using CSS ?

  • Last Updated : 13 Jul, 2021

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).


Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • 1: All the anchor tags are targeted with the CSS declarations (within the braces) on being hovered with the mouse cursor.



    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.


    .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 


    #target:hover {
        transform: scale(1.5);

To make our hover more catchy and decorative, we can also add CSS transitions to it. 

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 in understanding the hover effect to a deeper level. 


<!DOCTYPE html>
<html lang="en" dir="ltr">
    <meta charset="utf-8">
    <script src=
        .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;
    <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 class="link twitter">
            <i class="fab fa-2x fa-twitter"></i>
        <a class="link github">
            <i class="fab fa-2x fa-github"></i>
        <a class="link instagram">
            <i class="fab fa-2x fa-instagram"></i>
        <a class="link youtube">
            <i class="fab fa-2x fa-youtube"></i>
        <a class="link facebook">
            <i class="fab fa-2x fa-facebook-f"></i>


My Personal Notes arrow_drop_up
Recommended Articles
Page :