Hey everyone!
I have a link block with some text and an image that when hovered over should flip colors. So white background turns to black and black typography turns to white but image stays the same!. This is why adding the “invert” filter on hover won´t do.
I also tried changing the font color property of the link block when on hover but it doesn´t apply the changes.
Just to confirm, you are saying that you are using an image (a white image) as the background for the link block? If so, why not just use the background fill and set it to white? The background fill option will allow for more control over the CSS parameters when adding in the necessary interaction to make this work.
It sounds like you are just using the standard Hover property to make this happen but you will need to make a custom interaction. This is because you have two elements, the link block and the text that you’ve placed inside of it. You will want to use the link block as a trigger in custom interactions, you would use the mouse hover interaction and within the interaction settings you will set the initial state of the link block background to ‘white’ and on the text to ‘black’. Next you will set the hover state for each in the same interaction, the hover state should be ‘black’ for the link block background and ‘white’ for the text color. This will achieve the hover state you are looking for. Make sure not to forget to set the link block background and the text back to their original states in the “On hover out” settings to make sure when you move the mouse off the link block the interaction inverts and doesn’t remain on the hover state settings.
Dear Kyle, thanks so much for your reply. I´ve now tried to do the custom interaction with the link block as a trigger. So far I´ve managed to change the background color to black, but when I set the text color to white it does not seem to change. Any ideas why this might be?
