The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Hover for making image b&w and also b&w into color

3 posters

Go down

Hover for making image b&w and also b&w into color Empty Hover for making image b&w and also b&w into color

Post by moi_lolito April 22nd 2014, 12:51 am

Hi guys!

Could anybody help me with this question please? I'm wondering how can I add a black & white hover effect to an image? and also, how should I do it the other way? I mean, from a b&w image make a hover effect of transforming it into full color image that it's originally?

Thank you very much in advance Smile
avatar
moi_lolito
Forumember

Posts : 92
Reputation : 1
Language : English

Back to top Go down

Hover for making image b&w and also b&w into color Empty Re: Hover for making image b&w and also b&w into color

Post by TheCrow April 22nd 2014, 12:52 am

Are you referring to the images in posts or random icons on your forum?
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Hover for making image b&w and also b&w into color Empty Re: Hover for making image b&w and also b&w into color

Post by moi_lolito April 22nd 2014, 12:56 am

random icons on my forum, user panel icons, like "home, search, members, inbox" etc
avatar
moi_lolito
Forumember

Posts : 92
Reputation : 1
Language : English

Back to top Go down

Hover for making image b&w and also b&w into color Empty Re: Hover for making image b&w and also b&w into color

Post by TheCrow April 22nd 2014, 1:00 am

Well those icons you can do them one by one from the css. Add the b&w images as the default ones and then add the "hover" code to the css with the colored image. That is the only way i know to do that.
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Hover for making image b&w and also b&w into color Empty Re: Hover for making image b&w and also b&w into color

Post by moi_lolito April 22nd 2014, 1:05 am

so what are the hover codes for both scenarions? ^^

1. color -> bw
2. bw - color
avatar
moi_lolito
Forumember

Posts : 92
Reputation : 1
Language : English

Back to top Go down

Hover for making image b&w and also b&w into color Empty Re: Hover for making image b&w and also b&w into color

Post by TheCrow April 22nd 2014, 1:19 am

Example

Default icon
Hover for making image b&w and also b&w into color Facebook_circle_black-128
with hocer code
Hover for making image b&w and also b&w into color Facebook_circle_color-128
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Hover for making image b&w and also b&w into color Empty Re: Hover for making image b&w and also b&w into color

Post by moi_lolito April 22nd 2014, 1:22 am

yep, so what code should I add and where exactly?
avatar
moi_lolito
Forumember

Posts : 92
Reputation : 1
Language : English

Back to top Go down

Hover for making image b&w and also b&w into color Empty Re: Hover for making image b&w and also b&w into color

Post by TheCrow April 22nd 2014, 1:35 am

For the start and if you are awaiting from me the solution tell me your forum address and the exact icons you want to do this effect!
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Hover for making image b&w and also b&w into color Empty Re: Hover for making image b&w and also b&w into color

Post by Pizza Boi April 22nd 2014, 8:09 am

Hi Very Happy

LOL... sorry, when I was conjuring this code up, I kinda got carried away xD. Anyway, if you want to target everything, you should input a code like:

Code:
*:hover {
  background-color: #Color;
  color: #Color;
}

Change #Color to the color you want or you can add additional styles. Now, if you want an image, you can try something like:

Code:
*:hover {
  background:url(IMG LINK) repeat center scroll scroll;
  z-index: 999;
  color: #Color;
}

Though there's no guarantee that would be applicable to all images (Didn't even test it, that's justa rough idea - the one with image, that is).

Regards,
Pizza Boi
Pizza Boi
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

Back to top Go down

Hover for making image b&w and also b&w into color Empty Re: Hover for making image b&w and also b&w into color

Post by moi_lolito April 22nd 2014, 12:44 pm

sorry, my bad that I didn't wrote me address of the forum, it's http://prorevolution.forumotion.com/

what I want to do is the icons of search, ,members, groups, etc be in a black &white color (images I will create later), and after mouse points at them, they become their original color, what code exactly should I use to achieve this?
avatar
moi_lolito
Forumember

Posts : 92
Reputation : 1
Language : English

Back to top Go down

Hover for making image b&w and also b&w into color Empty Re: Hover for making image b&w and also b&w into color

Post by Pizza Boi April 22nd 2014, 12:52 pm

Hi Very Happy

Well, technically, if you just want the FONT to change color, just add color: #Color !important. But please provide an image of what you want change so we don't have much trouble Smile .

Regards,
Pizza Boi
Pizza Boi
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

Back to top Go down

Back to top


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