Hello Webflow community,
I just made this website for fun to test out some features within webflow. I’m having an issue making a really nice transition effect on the fruit hovers. I’d love some advice on how to fix it and a heads up on if there is a better way to do this within webflow (I’ve been using Webflow for about a week now so I’m still figuring lots of stuff out - especially with interactions).
My issue is that the interaction effect when hovering over each fruit isn’t as clean and smooth as I’d like. I feel like I tried every combination possible, but I know I’m missing something. There are two .svg fruit images stacked on top of each other - one image with a “normal shadow” and the other with a “hover shadow”. The hover shadow starts at 0% opacity, the normal shadow starts at 100% and the goal is to have the two essentially swap positions and have a smooth transition hover effect. The fruit should look like it’s being lifted from the page. Right now, you can see a slight opacity change when the hover is initiated. The shadow of the hover state image also lingers for 500ms or so after you hover off of the fruit. What I have right now is the best I was able to make it. It looks ok, but not great.
Not sure if this is necessary, but here is a bit about how the interaction is set up. Every [fruit]container is tied to the interaction event “hover interaction”. The interaction targets elements, “fruit image hover” and “fruit image normal.” The nifty feature to “limit to nested elements” is selected. This makes it very easy to make a site-wide change to this interaction. Everything you’ll need to look at should be right in that “hover interaction” event.
If there is a better way to do this, please let me know! I’m trying to take in as much webflow knowledge as possible (the reason for making the site in the first palace)