CODEWITHSUNDEEP
csshoverlinear-gradients
Michael Birtwistle
Michael Birtwistle

Reputation: 9

Linear gradient on hover?

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?

Upvotes: 0

Views: 7656

Answers (1)

fqhv
fqhv

Reputation: 1201

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>

Upvotes: 4

Related Questions