Please check out this site
I would like every link in the body copy (there will be about 8), to show a different background image on hover. The links go through to work, so the image will effectively be a work preview.
The hover state for the link works, but my issue is how do I target a different background image, for every different link in the body copy?
The animation is set for the class—I would like to avoid having to make individual animations.
I feel like using a CMS collection should make sense, but I am not sure how to associate the link ID to the appropriate work image.
Also. If I load all the images on page load and set initial appearance to 0% opacity, how do I avoid the “flash” of the image? There must be a better way to do this?
Help will be much appreciated! Mike
1 Like
Hi, is anyone around to help? Thank you!
@matthewpmunger you around to help pls? Let me know if I am not explaining it very well 
I think when you look at the site, it will make sense.
Thank you!!
Hey @mikeandco, I’m headed out but will give you some quick ideas.
You are on the right track. In order to have links trigger different images, change the trigger to Element instead of Class. You will need separate triggers per link. Then duplicate the link animation and change the target to the correct image.
My initial thought is to have a collection list per photo. The list is filtered to just show the desired photo. Then animation is actually revealing a different photo from a different background collection.
Setting the 0% opacity in the styles panel and remove it from the animation should get rid of the image “flash” on load.
Hope that helps. I’ll be back later today if you need anything else.
@matthewpmunger great, thank you!
So I have got the images working well, with multiple images and multiple triggers.
Because the images show up, I have made the body text go white when the links are hovered. But the issue is that the other links remain black (essentially disappearing).
How can I target the other links (the non-hovered on links) to make them white on hover?
There is also a weird issue, where every 3/4th hover, the body text does not change to white, remaining black, but then working again in the next hover. Any ideas here would be great too?
Thanks again,
Mike
Go into the interaction, select the other link(s), and add an interaction step for the other link(s) that turns them white when the other is hovered. Then on hover off convert it back to black.
I’m not experiencing the issue. Try resetting you’re browser cache and refreshing the designer.
@matthewpmunger ya, I was afraid of that.
There are going to be about 8 links and then more over time. It means every time I add one, change one, I have to go back into every animation, making sure there is a separate colour change for all links on the page.
But if that is the only way, I will have to make it happen 
Thank you!
Yes that is probably the sure-fire way to accomplish the effect.
My only other thought is this.
- Give the links the same class. In the animation target all links of that class and change font color to white.
- In the styles panel, for the link class use a different effect like bkgd color, highlight, or strikethrough.
This issue right now with having a “clean” interaction is that you have the hovered link blue and the rest go white so both interactions are affecting font color. In interactions choosing class instead of selected element will automatically affect all steps with that class. There’s no way to exclude a step. The way around this is to use the styles panel for the hover effect (different effect than interaction) for the currently hovered link and use the interaction to affect all links of that class. This method will be more flexible as the site grows.
Not sure if I explained it well, but hopefully you can make some sense of it.
Yap, I think I have got the gist. Thank you @matthewpmunger
