Header to Black & White When Hover

Hello,
Wow its been a minute hasn't it? Well I'm back. Anywho. I was just wondering if there was a code to where the header could fade to black and white when it's hovered over? I use PHPBB2, my forum is here:

http://themagicgames.forumotion.com/

Hello,

Try adding this CSS Code:

Code:

a#logo img {
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  filter: grayscale(0%);
transition:All 1s ease-in-out;
-webkit-transition:All 1s ease-in-out;
-moz-transition:All 1s ease-in-out;
-o-transition:All 1s ease-in-out;
}

a#logo img:hover {
    -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
transition:All 1s ease-in-out;
-webkit-transition:All 1s ease-in-out;
-moz-transition:All 1s ease-in-out;
-o-transition:All 1s ease-in-out;
}

Administration Panel > Display > Colors > CSS Stylesheet.

You can modify the values in (grayscale:100%) - This is the black and white image that you want.

In the second code ":hover" is the effect when the cursor is in the header. Experiment with the code

Hope it helps

Thank you so much!

Thanks for the help yoshi!

Topic solved and archived ~ brandon_g