Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Shaun Kelly
Shaun Kelly
35,560 Points

color Transition in css?

Hi guys, On hover i want a div to fill up slowly with a different colour starting from the bottom of the div. Is this possible with css?

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Shaun,

I don't know if this will work in your specific situation but maybe this codepen demo will be enough to get you started. http://codepen.io/anon/pen/mEqCF

You'll probably have to be more specific if this won't work in your situation.

Ethan Lowry
PLUS
Ethan Lowry
Courses Plus Student 7,323 Points
Ethan Lowry
Ethan Lowry
Courses Plus Student 7,323 Points

This article will explain how CSS transitions work: http://css-tricks.com/almanac/properties/t/transition/ .

As for having it fill up from a specific direction, that might be significantly trickier - I've never tried it but I'm sure plenty of people have if you want to try Googling it out. I imagine it might involve combining CSS gradients with transitions.