Streaming live at 10am (PST)

My hover effects works in designer but doesn't work on live site

Hi guys.

I have this issue: I’ve made a hover-effect on roll-over on some links. It works fine in the Designer but when I upload, the hover-effects (showing some images) doesn’t work.

Any input on this?

Here’s a run-through:

Live-site: larsh2020.webflow.io/

Preview:

Hey @larshartmann,

This is hypothetical and I can’t experiment with it unless I can publish it or replicate the issue myself, but I notice that you set the image opacity to zero in the designer, as well as opacity to zero as your initial state in the interaction. It’s my understanding that a specified initial state in an interaction tells the browser how to load that element, so it will generate the necessary CSS to match the initial states. It seems unlikely but perhaps the initial state and the 0 opacity value you specified in the effects section might be conflicting with each other? It might be trying to transition from 0 to 100 opacity but for some reason, the opacity effect could be overriding? Maybe try resetting the opacity value in the effects panel on your images, then publish and try. At the very least, the opacity is being affected from two places so it doesn’t hurt to rule that out. I have accidentally created bugs like that before.

Let me know if that works!

AC

Thanks a lot for your input. Unfortunately it didn’t do the job, but thanks anyways.

This is found in the html-file:

<div data-w-id="7738b8ad-1ad6-504b-dd4d-122c463283c5" style="display:none" class="case-images-absolute-position">

The ‘case-images-absolute-position’ is a div-wrapper for the images. But how come the html has the inline style=“display:none” in the div-tag - and how do I edit this?

Hey Lars!

I think you might have actually just shed some light on something that may be happening. The data-w-id you see in the code to the best of my knowledge is code generated by webflow to associate an element with an interaction. The hover interaction you are working with only affects a child of the element with class=“case-images-absolute-position”. The fact that there is a data-w-id leads me to believe there is a chance it might have an initial state in another interaction by accident? It’s worth checking.

Alternatively, create a new div parallel to the class=“case-images-absolute-position” wrapper, match all of the characteristics, then drag the children into the new element with a new class name.

Or, you can try copying this code into your head, replacing with your necessary display value of course:

.case-images-absolute-position{
display: replacethis !important;
}

The !important value is meant to inform the browser that this line of code should override other instances, but its not great practice to use it.

Hopefully something in here helps!

AC

You were absolutely right, that it had something to do with interactions. I found an old interaction, which was not in use, that hid the wrapper div. Even though the interaction was not assigned to any elements or page triggers, apparently it still affected the div in question. Weird. But by deleting the interaction completely from the project, the display-hidden inline css vanished.

That’s a lot for all input! It works now :smiley: