The Grid Black and White to Colour transition

[shadingspecialists]

Hi there,

I’m aiming to achieve an effect with The Grid plugin: http://www.codeblocq.com/2016/08/Turn-an-image-to-Black-and-White-on-hover-with-CSS/

Basically, I’d like pictures to start in black and white and go in colour on hover.

Could you please help me with some instructions or a link with them?

Many thanks

[friech]

Hi Pierre,

Thank you for writing in, please add this to your Grid’s CSS/JS code > Custom CSS area

.tg-item-image {
  -webkit-filter: grayscale(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(100%); /* FF 35+ */
}
.tg-item-image:hover {
  transition: filter .5s ease-in-out;
  -webkit-filter: grayscale(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: grayscale(0%); /* FF 35+ */
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!