-
Posts
-
I want to have my images in Black and white and back to coloured image on hover.
I found the code below as a solution. I put the code in the CSS.
It makes all the images black and white, but the hover function doesnt bring up the colours.See http://supergaaf.nl/audiovisuele-opdrachten/
Can anybody tell me whats wrong?
The Code:
#top img { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */ } Then, to disable it on hover... #top img:hover { -webkit-filter: none; -moz-filter: none; -ms-filter: none; filter: none; }Thanxs
Hi Gilbert,
I think instead of filter: grayscale(100%); to filter: none;, just set it to 0, so you put it this way:
filter: grayscale(0);You may need to remove the image overlay, just use this code:
#top .image-overlay { display: none !important; }Hope it helps.
Best regards,
NikkoThanxs Nikko,
I tried your solution like this
#top img:hover { -webkit-filter: none; -moz-filter: none; -ms-filter: none; filter: grayscale(0); }without succes.
The image stays in B/W on hover.
I hope you have an other solution?Hi CelebrationEvents,
I have checked on the loaded CSS and I think you should remove the extra text:
Then,to disable it on hover... #top img:hover { -webkit-filter: none; -moz-filter: none; -ms-filter: none; filter: grayscale(0) }replace it with:
#top img:hover { -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); filter: grayscale(0); }Best regards,
NikkoHello Niko,
I placed the code below in the css. And i put the photos in a content container witt the same code. Awesome, just like i wanted it!!
I would like to do th same thing with a mansory gallery.
Can you help me with the code for the mansory section on the homepage.
Cleary that doenst work with a img#top .gd-bw-photo img { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); filter: gray; /* IE 6-9 */ } #top .gd-bw-photo img:hover { -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); filter: grayscale(0); }Hi CelebrationEvents,
Try using this CSS code instead:
#top .av-masonry-image-container { filter: url(data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter i…0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); filter: gray; } #top .av-masonry-entry:hover .av-masonry-image-container { -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -ms-filter: grayscale(0); filter: grayscale(0); }Best regards,
NikkoAgain….thanx you very much!!
I implemented the code and it works and looks great.
See http://www.supergaaf.nlOne final question:
The images are now filtered to grayscale. Is it also possible to filter out only the Green and Bleu colors in the images?
Because of the red enfold theme colors it would be nice to show only the Red colors in the images and the other colors on hover.I hope there is a solution for that as well…
Kind regards
Gilbert
- You must be logged in to reply to this topic.