The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Header to Black & White When Hover

View previous topic View next topic Go down

Solved Header to Black & White When Hover

Post by perfectSTORM! on December 18th 2015, 1:09 am

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/


Last edited by Silver Cloak on December 18th 2015, 2:21 pm; edited 1 time in total

perfectSTORM!
Forumember

Male Posts : 328
Reputation : 8
Language : English | Spanish [1] | HTML

http://themagicgames.forumotion.com/

Back to top Go down

Solved Re: Header to Black & White When Hover

Post by YoshiGM on December 18th 2015, 2:44 am

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 Smile

Hope it helps Wink



YoshiGM
Forumember

Male Posts : 512
Reputation : 76
Language : Spanish & English
Location : Mexico

http://asistencia.foroactivo.com/u21373

Back to top Go down

Solved Re: Header to Black & White When Hover

Post by perfectSTORM! on December 18th 2015, 2:21 pm

Thank you so much!

perfectSTORM!
Forumember

Male Posts : 328
Reputation : 8
Language : English | Spanish [1] | HTML

http://themagicgames.forumotion.com/

Back to top Go down

Solved Re: Header to Black & White When Hover

Post by brandon_g on December 18th 2015, 2:32 pm

Thanks for the help yoshi!

Topic solved and archived ~ brandon_g


Remember to mark your topic when a solution is found.

brandon_g
Support Moderator
Support Moderator

Male Posts : 5144
Reputation : 478
Language : English
Location : USA

http://broadcastingduo.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum