Streaming live at 10am (PST)

Hover state on image and text link


This might appear lazy but I have read a good few threads and tried a few different things to solve the following issue with no joy. Can anybody help, share link below.

I’d like a link block to change both an icon and link text on hover. I’ve set an .svg file to the background of the link block to swap and added a hover state to the text link.

How do I get them to work as one element? So hovering over the icon changes the link text simultaneously and vice versa.

The link block in question is the search icon with ‘check availability’ underneath the intro text.

So simple, yet so not easy for me.


Here is my public share link:

Hi Will,

What you are trying to achieve will need a custom interaction rather than using the default hover state functionality (because you are trying to affect 2 elements - your background image and the h3 text heading)

How to create the interaction is basically the principle as per this forum post.

You’ll need to wrap the 2 elements (I suggest using an image block for your svg, and the h3 text), in a link block, and set the interaction on the link block, within the interaction set the targets to the image and the text.

Hope that helps.

Let me know how you get on.


1 Like

Hi Keiran,

Thanks for the help, much appreciated.

I find the interaction menu really difficult to work with but I gave it a go. The show/hide on hover works but the interaction is really glitchy. I checked for delays, all set to zero.

If you hover in from below or the right it jumps about all over the place. Can you see anything obvious that I’m doing wrong?


Here is my public share link:

Hey Will,

Well done on creating your interaction.

Everything in the interaction looks correct.

When I tested the hover on your preview site, it wasn’t jumping around or anything like that?? I’m using Opera Browser - checked all viewports and the interaction was fine???

Try this to see if it makes any difference for you in your testing:
Within the interaction, place the different ‘interaction steps’ together, rather than waiting until the previous has completed (confused?!), this will make the ‘hover’ instant for each step (rather than waiting for the previous one to complete before initiating)

Let me if that makes any difference.

Here are some images showing before and after for the settings:
Before - 1 After - 2

1 Like

That’s totally nailed it. Perfect in Chrome and Safari now. I hadn’t set a height on the link-block either, that made a difference.

Thank you so much Keiran. Thinking I might tackle more interactions now.

All the best

1 Like