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

Design

Hover on pictures

I'd like to know how to make a picture black and white and when you hover on it it's color. Any idea how to do it? :)

4 Answers

Richard Duncan
Richard Duncan
5,568 Points

Taking a guess looking at your profile this is an example of a solution. I've used CSS filters - source credit for cross browser functionality here and jQuery .on just in case you plan on loading any images asynchronously but you could achieve the same effect witth jQuery .hover or using CSS and anchors.

http://jsbin.com/joyixequ/1/

Thank you!!

Richard Duncan
Richard Duncan
5,568 Points

No worries glad it helps, you could mark the answer as correct if it was helpful :)

Hmmm, why did you use jquery? Not img:hover?

Hmmm, why did you use jquery? Not img:hover?

Richard Duncan
Richard Duncan
5,568 Points

Preference, guessing at the questioners skills set and backwards compatibility.

But hover works everywhere without any library. http://caniuse.com/#search=hover

Richard Duncan
Richard Duncan
5,568 Points

That's a general search for css selectors which yes are supported however :hover in css 2.1 was a link pseudo class.

I can honestly think of a number of solutions to this problem if you think you can offer an original solution that doesn't use filters and jquery be my guest.