Swapping images - hover effect timing help

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)

https://preview.webflow.com/preview/finsweet106?preview=91e648771b2aa039bf113313881d91f8

One more question - how do I combat browser compatibly issues within Webflow? In chrome, there’s a perfect amount of padding on the bottom of the fruit wrapper. On Safari, the last row of fruit and the “Do you like fruit?” question is cut off. Check out the screenshots.

Hi,
I took a look at what you had, and it worked, but right at the end, there was a short lag as the shadow went back to its original. I’m presuming this is what you meant about it not being smooth.

Personally, I would make this much simpler by having one image with a drop shadow that’s a happy medium in size and opacity. Then I’d set an interaction to just affect the image itself, enlarge it to 115% (as in your example), and then let it return to its normal state. By enlarging the image, you’re also enlarging the shadow. Both the image and the shadow seem to come off the page. The transition is very smooth both ways. Unless there’s a specific need for the shadow to be a specific size and opacity at normal and another specific size and opacity on hover, I don’t see the need for the complexity.

See set up below:

I don’t know if you did this because you were just dinking around to learn, but your hover triggers (the containers) are REALLY large and start to trigger the interaction while still far away from the fruit images themselves. You’ll probably want to have them more tightly targeted in a real-world setup. :slight_smile:

I only looked at this in Chrome, so I can’t really help with the Safari issue.

Hope this helps!
Cheryl

Hi Cheryl,

Thank you for this. As for using a single image with an in-between type shadow - yes, that’s a good way to do it. I wanted to see if a hover shadow effect (like I envisioned this site to have) was possible. Kinda is, kinda isn’t. In a production site, your method is definitely the way to go there.

As far as the containers, I wasn’t sure how else to do this without having an interaction event on every single fruit box container. The the container is really large because it triggers the text that’s associated with that fruit. ALL of the fruit text is sitting fixed on the bottom of the site (while inside the container of the fruit it belongs to). I wasn’t sure how else to get this effect without making individual interactions for each box. Is there a more efficient way? If so, I’d love to know. Also, what’s the technical issue with such a large container? There is no lag on the text that expands the container.

Thanks so much!

Haha! I was so busy paying attention to the interaction with the shadows, I totally ignored the text appearing. :slight_smile: Right off the bat, I can’t think of a way to make the text appear using “nested” text. I know you can make child elements that are larger than their parent appear as they’re supposed to, but using the nested option within elements in different places on the page makes it almost impossible. It would be much easier to created many interactions.

Good luck getting it all figured out! :slight_smile:

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.