On my “SHOP” Page I created my hover in and hover out interactions to a class, “shop pic”. I am having difficulty with all the members of my class individually interacting when my mouse hovers in and out of each image.
To give a little background, I used the black blade, “Asphalt & Green Concrete Diamonds Blade”, at the top left to create the hover in and hover out interactions. I followed the “Reveal on Hover” video exactly.
How can fix this so that the images in the class “shop pic” individually hover in and hover out when my mouse interacts with each one?
Check the “affect:” dropdown in the interactions panel. It’s currently set to class meaning, “When I hover on the trigger, all of the elements with a class of shop pic will animate”. Change this dropdown to interaction trigger, which means only the item you’re currently hovering on will animate.
Then, in order to automatically apply this interaction to all of the “shop pics”, scroll to the trigger settings at the bottom of your hover interaction and click class. Be sure “shop pic” is selected as the class, shown here:
Looks like you updated everything correctly so it should be working, though I just opened up your read link, and had the same issue.
I removed the hover interaction, and simply tried re-adding it, and now everything works great. Not sure why this is the case, but give it a shot and let me know if it helps!
