How to Customise Image Lazy Loading in Webflow?

Hi everyone,

I’m currently working on a project in Webflow and want to customize the default image lazy loading behaviour. Specifically, I want to make the image appear greyscale, possibly with other CSS filters, and pixelated when it’s loading, with the pixels becoming clearer and clearer until the highest resolution image required for the current viewport is loaded, at which point, I want it to transition to full colour with all effects removed.

I’ve tried using some custom CSS/JS from a few different sources, but I haven’t been able to achieve the desired effect. Has anyone else had success with overriding webflow’s default image lazy loading style (loading="lazy") in a similar way? Any suggestions or guidance would be greatly appreciated.

Thank you!