Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Fill background color left to right CSS

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

-vendor-prefix transition 

Could anyone give me some pointers on achieving this please.


Problem courtesy of: Richlewis


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 linear tough) background-position:right bottom;

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%;
Solution courtesy of: beardhatcode


View additional discussion.

This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Fill background color left to right CSS


Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription