Header to Black & White When Hover
The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 1 • Share •
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/
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/
Last edited by Silver Cloak on December 18th 2015, 2:21 pm; edited 1 time in total
Re: Header to Black & White When Hover
Hello,
Try adding this CSS Code:
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
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

Re: Header to Black & White When Hover
Thanks for the help yoshi!
Topic solved and archived ~ brandon_g
Topic solved and archived ~ brandon_g

Remember to mark your topic
when a solution is found.

The forum of the forums :: Support forum :: Forum Design & Appearance Help :: Design & Appearance Problems Archives
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum