-
AuthorPosts
-
February 23, 2020 at 12:17 am #1187022
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
- This topic was modified 4 years, 8 months ago by CelebrationEvents.
February 24, 2020 at 4:53 pm #1187399Hi 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,
NikkoFebruary 24, 2020 at 9:15 pm #1187496Thanxs 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?February 25, 2020 at 4:34 am #1187537Hi 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,
NikkoFebruary 25, 2020 at 6:03 pm #1187801Hello 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); }
February 25, 2020 at 9:13 pm #1187834Hi 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,
NikkoFebruary 25, 2020 at 10:29 pm #1187870Again….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
February 26, 2020 at 6:15 pm #1188142Hi Gilbert,
No, greyscaling does not really work like that. You can just change the filter on hover.
If you need further assistance please let us know.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.