Gallery image Greyscale using CSS on hover colored -TheOne

[sandesh]

Hi,

I am using TheOne theme, I have added gallery module. I want image in grey scale and on mouse hover they will appeared recolored. I found similar topic (https://seatheme.net/forums/topic/image-greyscale-with-css-re-color-on-mouse-over/) but it was for another theme.
Please help me how I can apply similar effect to TheOne gallery images?

I thanks in advance…..

[SeaTheme]

Hi,

The solution is same as this post. You could use the custom css. If you don’t know how to use, please send your wp-admin(url/user/pass) via my profile contact form , I’ll log in to check it.

Fw: the solution is not perfect, It doesn’t work for IE 10/11

Cheers!
Bwsm – uiueux.com – Twitter – Facebook

[SeaTheme]

Please use the custom css:

.isotope-list-thumb {
  /* Firefox 10+, Firefox on Android */
  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");

  /* IE 6-9 */
  filter: gray;

  /*
    Chrome 19+,
    Safari 6+,
    Safari 6+ iOS,
    Opera 15+
  */
  -webkit-filter: grayscale(100%);
}
.fade_wrap:hover .isotope-list-thumb {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(0%);
}

[Author]

Posts