Instagram icon with hover effect-CodePudding

I have the following instagram icon and when I hover the mouse I would like the background to become white and the icon to become colored

In Footer.js :

                         <a href="https://www.instagram.com/">
                            <FaInstagram   className='instagram'/>
                        </a>

In Footer.css:

            .instagram{
    font-size: 2rem ;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    color: #fff;
    margin: 10px;
    border-radius: 20%;
}

.instagram:hover{
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
    background-clip: text;
    border-radius: 20%;
    transform: scale(1.5);
    color:transparent;
}

https://codesandbox.io/s/musing-framework-j5564?file=/src/App.js

CodePudding user response：

You can use something like below code in your Footer.css

.instagram:hover{
    background: #fff;
    transform: scale(1.5);
    color: #fd5949;
}