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

Posted by Anastasija Scepak
Anastasija Scepak
8,308 Points

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? :)

Richard Duncan
Richard Duncan
5,568 Points

With what technology?

4 Answers

Richard Duncan
Richard Duncan
5,568 Points
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/

Anastasija Scepak
Anastasija Scepak
8,308 Points

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 :)

Patryk Nowak
Patryk Nowak
14,103 Points

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

Patryk Nowak
Patryk Nowak
14,103 Points
Patryk Nowak
Patryk Nowak
14,103 Points

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.

Patryk Nowak
Patryk Nowak
14,103 Points

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

Richard Duncan
Richard Duncan
5,568 Points
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.

Privado Coronel
Privado Coronel
13,504 Points
Privado Coronel
Privado Coronel
13,504 Points

css image sprite aswell .