I’ve built a page with an interaction that should reveal an image that follows the mouse while hovering over some text. When you move away from the element, the image should disappear.
From what I can see, I’ve recreated the interaction exactly as it is in the cloneable project. The image shows on hover just fine, but I can’t for the life of me work out how to make it hide on mouse off. I feel like I’m losing the plot. Can anyone figure out what’s going on here?
Here’s my project – the interaction is on the ‘Daily Salads’ text just beneath the fold:
Hi there, the issue is occuring because of the way your items are laid out in HTML. You need to wrap the element that triggers the hover animation and take the image that shows on hover out of the trigger. Then you need to reconfigure the trigger to show siblings with that class rather than children because if it is triggered on children once you leave the trigger even though you left it you are still technically hovering over it since you are hovering over it’s child.
@thedrussell ~ The thing about cloning a project like that is that you get a lot of unwanted classes and a scary nested tree. I would try copying over elements from the project you want to clone, rather than using the clone. I was trying to find your “Image Preview” in the tree, but couldn’t. I would have kept digging, but the hole was too deep. lol. A tree like that could cause some funkiness. It was not showing up when I clicked it in the interactions panel.
I kind of understand the theory of this but I’ve tried a bunch of things and still can’t seem to get it working. Is the issue with the location of the trigger in the hierarchy? I’ve put the trigger and image wrap on the same level (with a shared parent div that doesn’t have any interactions), and set the actions to apply to siblings but I still get the same result.
Also in the project I’m referencing, the image wrap is a child of the trigger, and all of the actions affect children only. This is what’s confusing me, I don’t understand why it’s working in that project and not mine.
@dannyFig Fair point, I did actually build this from scratch and just use the clone project for reference but the nesting is primarily me trying out a new style system (Client-first). I think I’ve picked up some bad, deep nesting habits from these things…
@thedrussell ~ Took me a minute to get it to work, but it’s strange how I did it. I killed the opacity elements in your mouse trigger. I’ll let you dig as to the reason, but maybe that helps your diagnosis. Seems like a bug, or something I’m missing. Webflow can be a little buggy at times.
@dannyFig When you say you killed the opacity, did you remove that action completely or change the opacity settings? I’ve tried that and it doesn’t work for me
EDIT: I think it must have been a bug. I’ve just rebuilt the interaction from scratch with exactly the same settings and it’s working fine! Thanks for the help everyone.
@thedrussell ~Yes. I had removed the opacity elements from the Interaction. Should have made that clear. Glad it’s working.
I have bugs from time to time. I’ve noticed that when my internet gets bogged down that I have some glitches. I’ve had to rebuild things too. So it’s not you.
