I’m having a terrible time trying to make what I think should be a simple interaction. I have 3 cards, and I want them to show relevant images on hover, and then go back to the original state off hover. It works fine to show my images on hover, but as soon as I try to do! anything on hover off, I get this flashing and it doesn’t work. I don’t know if this is a bug, or something I’m doing wrong… I tried to find other questions on the forum, but i don’t think they answer this.
Here is a link, it’s only working for web at this stage. Also, please don’t judge my horrible organization…
Hey @MaddisonHarder and good question. Are you using interactions? There you need to set both the on:hover animation/action as well as the off:hover animation/action. If you just do the hover on, it won’t do anything after you hover away.
I visited the link but the images didn’t do anything when I hovered so I’d check your interaction settings,
Hi @pixelweak Thanks for getting back so quickly! I am using interactions. Or trying to. When I set the hover off animation I get weird flashing. I tried to attach a gif of the issue but it didn’t save out properly, sorry! I don’t know why you wouldn’t be seeing anything when you hover. That’s concerning. At the moment when you hover on the first 2 images it changes to the images I want (but you have to refresh to go back. I don’t have the second interaction turned on because it doesn’t work.) The third image has it turned on, and therefore it doesn’t work. I get flashing when I hover on it.
Hmm that is weird. Let me try to make make it myself and see if I run into the same problem.
So just to confirm: You have three images ( the cards ) and when you hover you want them to change to alternative pictures, and then change back to the originals on hover out, right?
Yep, that’s right! (technically they change to 6 different images, but it’s not a big deal.) Thank you! Will you let me know if you still don’t see anything happen if you hover on those images? I have no idea why it wouldn’t be working…
Its pretty simple, you need to make the alternate pictures overlap each other (position absolute, cover parent.), make the wrapper also relative otherwise the absolute items will be relative to the body.
Set the opacity of all alternate pictures to zeo, and then an interaction that makes the first image opacity 0, and the next 100, etc.
That’s helpful, thank you! I was using hide/show rather than opacity. I’m trying that, I see you’ve changed the position so it stays in place. Mine is a bit more complex, and I haven’t go it working yet, but thanks for the help!
hi @pixelweak , I am really having trouble still… I can easily replicate what you did, but my project is more complex. I can’t keep the cards on absolute because then they all overlap (maybe this is fixable?), and also when I mouse over I want 6 images to appear and cover the existing 3 images. If I try using absolute I did find a work around to make it work, but I had to use an animation to manually move the new images up, and it isn’t responsive. (Also it only worked in preview)
I really don’t understand what I’m doing wrong because it works on preview:
This is what happens once published. The card on the left works, (original version which uses hide and show) but for the card on the right everything disappears on hover, though the preview within the animation works. The card on the right is using opacity and show/hide. I tried to follow some of your advise, but didn’t really get very far.
So to be more clear, I want the card to make 6 images replace it and also the other images next to it. I don’t think I can only use opacity here, I think I have to use hide/show so I can get the whole row of images to be in the right spot. My first and second cards work on hover only. If I try to do anything to hover off, then they get all flashy and weird.
Here’s the link again, if nothing happens try toggling preview. It only seems to work if toggled for me.
@pixelweak I think I figured it out. I guess I have to animate every image instead of trying to use blocks on images. Your example was really helpful, thank you!
