Fill background color left to right CSS
Having a play around with some css3 today, transitions mainly.
What i would like to achieve is that upon hover of an li element the Background will fill from left to right with a different colour, ideally i would like to be able to fill half way or all the way.. I have started a jsfiddle
Do i need to use the property
Could anyone give me some pointers on achieving this please.
The thing you will need to do here is use a linear gradient as background and animate the background position. In code:
Use a linear gradient (50% red, 50% blue) and tell the browser that background is 2 times larger than the elments width (width:200%, height:100%),then tell it to position the background left.
background: linear-gradient(to right, red 50%, blue 50%); background-size: 200% 100%; background-position:left bottom;
On hover, change the background position to
right bottom and with
transition:all 2s ease;, the position will change gradualy (it's nicer with
As for the -vendor-prefix'es, see the comments to your question
extra if you want to have a "transition" in the color, you can make it 300% width and make the transition start at 34% (a bit more than 1/3) and end at 65% (a bit less than 2/3).
background: linear-gradient(to right, red 34%, blue 65%); background-size: 300% 100%;
This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here