samparker0252 samparker0252 - 27 days ago 6
CSS Question

Div background color, to change onhover slowly

I'm trying to make a div's background color change on mouse over. I wanna make background like this spnashot

and i am using this code on hover. I also wanna that when mouse over then color will change slowly



.header_col a:hover{
background: -webkit-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
background: -o-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
background: -moz-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
color: white!important;
}




Answer Source

Hope this code will work

.header_col li {
  display:inline-block;
  transition: background 0.2s;
  transform: skew(20deg);  /* SKEW */

}
.header_col li a {
  display:block;
  text-decoration:none;
  color: black!important;
  transform: skew(-20deg); /* INVERSE SKEW */

}
.header_col li:hover{
  background: -webkit-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: -o-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: -moz-repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
  background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%); 
  color: white!important;
}
.header_col li a:hover{
   color: white!important;
}
<ul class="header_col">
	<li><a href="#">Page 1</a></li>
	<li><a href="#">Page 2</a></li> 
	<li><a href="#">Page 3</a></li> 
	<li><a href="#">Page 4</a></li>
	<li><a href="#">Page 5</a></li>
</ul>