Grayscale Hover Effect on Repeater Image

Hi all - I have scoured the forum, as I thought this would be a basic/common coding feature, but cannot find it anywhere!

I am wanting to code a hover effect just on the images in my repeater to turn from color to B&W onMouseIn. The repeater is connected to a dataset. Is there a simple way to code this? Please advise!

You need to look into using the Repeater API.$w.Repeater.html

See here for more info.

Nayeli (Code Queen) also has a good tutorial about it.

The above examples are similar to what you are needing to do on your page, however you will just need to change them to showing and hiding your colour and mono images.

I’m struggling to find the written code for grayscale specifically - since I’m not changing the color of a shape, per say. Do you know the general code to apply the grayscale filter effect to an image? Or would I have to duplicate the image with that filter effect?

The quickest option here would be to simply switch between the two different states on mouseIn and mouseOut.

So yes that would involve duplicate images, one in colour and the other in mono, with it setup with the mouseIn event showing the mono image and hiding the colour image with the mouseOut event showing the colour image and hiding the mono image.