I’m having a bit of trouble with interactions. I’m trying to have it so everytime you hover over one of the city names the image to the right will change to a picture of that city. It’s working as expected the first time you hover over the text, the image shows. However when you hover out and back in a second time nothing will display. I’ve tried a few different methods but can’t figure out why it’s not triggering again.
(Currenly, i’ve only set it up with the text ‘New York’)
Bonus question
Is it possible to set up this interaction under one interaction element trigger, instead of setting them a new interaction on each element. It’s fine and managable to do if I must, I just prefer to keep my work minimal and clean.
Example: In the interactions panel, then under the element triggers. I’d like to just have one timed animation labeled as “Hover in - City” and that contains all different changes when someone hovers over the different text and changes the image.
Currently I have it as “Hover in - New York” and will duplicate it to have a new one for each city “Hover in - Singapore”, “Hover in - London” and just adjust the element it’s effecting. I feel that method is wrong and can be done cleaner.
It’s not the interaction, it’s something in the “layer stack” of the [Explore-Img-Container]. I deleted it entirely and added another blank div, and the interaction was fine. I didn’t have time to go through and find what that container had wrong, but that’s your starting point.
I’d try adding a new container and seeing if it’s because of a background image. Test without bg image.
Here’s the quick video:
Really, Thank you for taking the time to even do a quick run through with a video. It’s incredibly helpful and solved the issue i’ve been avoiding going and addressing for the passed two days.
That’s given me a really helpful base to first figure out what’s wrong so I can learn from this mistake while also offering a solution if I just can’t get it.
