Greyscale-hover on image but not text

Hi there people

I’m currently creating a portfolio-site and would like to add some hover-effects. As you can see on my landing-page, I’ve got an Image with text over it. As soon as you hover over the image, both text and image lose the greyscale-effect. My problem is, that I would like to invert the greyscale-effect on the text (text turns grey when hover). Is this somehow possible in native-Webflow, or do I need to use code for this?

Thanks for the help!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

hello @ewanpos ,
I checked your website and I think this might help you:
When you use the filter property
The filter is applied to all elements inside the main element
So you have to separate them
For example, you should consider a link block as a parent (a cell in the grid) with “relative position” and place the desired photo and text inside it.
Put your photo inside it with “absolute position” so that it falls under your writing (you could use z-index).
By using interaction, you have freedom of action and can control the Grayscale events to be applied to your elements separately when you hover over your link block.
For example, reduce the grayscale of the photo and increase the grayscale of the text or vice versa.