Greyscale hover effect


Hi, Is there any way to convert content card's image in Act2 Neambo to grey(greyscale) by default and shows it's original color when hover? I am not able to find a way to do it.

Please help, I am attaching the screenshot for content card from design manager as well as the web-page,

Thanks In Advance.


Hi @Abhi, this is certainly possible with a bit of Jquery or simple CSS. You could alter the custom module to have two different image fields, one that holds the grayscale image and one that holds the normal image. You can then hide one and show the other depending on if the user is hovering or not. This stackoverflow thread goes over how to do this.

If you're more familiar with javascript, you can use the jquery mouseover() and mouseout events to do the same thing. You'll need copies of the grayscale images in order to do this.

Another option would be to have a tinted overlay over the images, and then remove this overlay on hover