[FIXED] How to prevent the Instagram logo from being hidden when hovered over?

Issue

I am trying to add a social media icon for my site, and the gradient is in CSS3. Currently, the Instagram icon outline hides when it is being hovered over.

This is my current code:

.social-icons li.instagram a {
    border-radius: 50%;
    background: #F2F2F2 /* This is for the default "gray" background */
    url(http://www.example.com/images/social/instagram.png) no-repeat 0 0;
}
.social-icons li.instagram a:hover {
    background-color: #f09433;
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
}

My Facebook logo works, which is identical except for a solid color (background: #3b5998;) instead of a gradient WebKit. The Facebook works as it should, and when hovered the icon becomes blue with the "F" in the middle.

Any tips on how to accomplish that here?

Solution

I realized my problem was that the gradients are treated as if they were images, so what I did was overlap two 'images' to obtain the outcome that was needed.

So the code finalized was:

.social-icons li.instagram a {
    border-radius: 50%;
    background: #F2F2F2 url(http://www.myprojectsite.com/images/social/instagram.png) no-repeat 0 0;
}
.social-icons li.instagram a:hover {
    background-color: #f09433;
    background-image: url('http://www.myprojectsite.com/images/social/instagram.png'), linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
    background-image: url('http://www.myprojectsite.com/images/social/instagram.png'), -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
    background-image: url('http://www.myprojectsite.com/images/social/instagram.png'), -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
}

Answered By - MJM

Answer Checked By - Candace Johnson (PHPFixing Volunteer)