Hi guys,
I’m new to webflow and having trouble with the opacity animation. When the mouse hovers over an image, I want the button to appear. I can’t get it to do that, however, I think something is wrong when the mouse leaves the image, I am unable to get the button to disappear. Here is a link to my draft. Would appreciate any help.
Thanks
Here is my public share link:
https://preview.webflow.com/preview/portfolio-31fde2?utm_medium=preview_link&utm_source=designer&utm_content=portfolio-31fde2&preview=fef6555fd7de11c22bb33afca0e4ba10&workflow=preview
It works for me when I delete the image element from the interactions. I’m not sure what your intention is though. Are you planning to add more movements/effects on the image when you hover it? This currently looks incomplete. If it is complete, yeah you don’t need that image element in there.
Hey,
Thanks for your response.
Effect I’m after
I’m wanting the button to show when I hover over the image it sits on. When I hover off the image, I want the button to disappear. That works fine for hovering over the image (so thanks for that), so the next issue is that when I move the mouse over the button, it disappears and I need it to remain so that it can be clicked on. Is this another interaction I need to add for the button only?
Other interactions
I will add a zoom-in effect on the image once you hover over it, which I have not yet figured out how to do. But will try that a bit later. Not sure if you know how to do that, nor if I’m making sense.
Thanks for your help and advice
Here’s a sample of the interaction setup. I didn’t use an interaction on the button. I’ve only used the normal style selector method to create the hover/press state. I also don’t have this shown in a grid (like your page) but this should give the gist for the interaction piece.
https://chriss-radical-site-9ee9a7.webflow.io/
https://preview.webflow.com/preview/chriss-radical-site-9ee9a7?utm_medium=preview_link&utm_source=dashboard&utm_content=chriss-radical-site-9ee9a7&preview=f2811a8a8b03ff87fca19a2b1a39f1c7&workflow=preview