Linear gradient on hover?

Question

In a footer I have social media icons (FB, Twitter etc) which are white until hovered over. Once hovered, they become their respective colours (dark blue FB, light blue twitter etc).

My problem is that the instagram icon is multicoloured. Is there any way to change the colour to a 45 degree linear gradient once hovered?

Or does this only work with background colours (as i'm using font-awesome so the icons are technically text or so I'm told)

I've also read transitions don't support linear gradient, as hover is an effect does this apply to it as well?

http://stackoverflow.com/questions/37831837/gradient-text-color ... Related since your icons are text could work — DaniP, Mar 28 '17 at 17:15
Even though Firefox now also supports `background-clip: text`, it’s probably best just to use an SVG. — Ry-, Mar 28 '17 at 17:22

score 4 · Accepted Answer · edited May 23 '17 at 12:10

See the below code snippet! There may be some concern about browser support of -webkit-background-clip: text; and background-clip: text;.

The .fb-gradient:hover css segment implements a text-gradient on hover.

The .instagram:hover css segment implements the instagram colors on hover.

.icon-container {
  background-color: #BBB;
  font-size:72px;
  float: left;
}
.icon {
  color: #FFF;
  margin: 3px;
}

.fb-gradient:hover {
  background-image: -webkit-gradient( linear, left top, right bottom, color-stop(0, #3b5998), color-stop(1, #fff));
  background-image: gradient( linear, left top, right bottom, color-stop(0, #3b5998), color-stop(1, #fff) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.instagram:hover { 
  background: #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 );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="icon-container">
  <i class="fa fa-facebook icon fb-gradient" aria-hidden="true"></i>
  <i class="fa fa-instagram icon instagram" aria-hidden="true"></i>
</div>

Brilliant, this basically worked for me and turns out it was pretty simple! — Michael Birtwistle, Mar 28 '17 at 17:48

Linear gradient on hover?

1 Answers1