mouse hover in image

[vickygupta]

Hello Guys i am facing a problem in my page i want to add a fb logo that should be in black and white and when i mouse hover it it will show me a color one . please suggest me in which way i can do this ?

[Paulie_D]

The simplest way is to use two background images and swap them out on hover.

There is the new ‘filter’ option but is has very limited browser support.

[Kitty Giraudel]

1. Create a .jpg or .png file with the 2 versions of your image side by side.
2. Place it as a background image on the element you want to hover.
3. When hovered, change the background-position property to show the correct version.

[vickygupta]

Sorry Didn’t got u Mr
HugoGiraudel can i have the code please please ?

[Paulie_D]

Try google for css and sprites

[i3a1l3y]

This is a easy enough guide:

[http://www.noobcube.com/tutorials/html-css/css-background-image-sprites-a-beginners-guide-/](http://www.noobcube.com/tutorials/html-css/css-background-image-sprites-a-beginners-guide-/ “”)

Also has an advanced tutorial, if you fancy that.

[Author]

Posts