Hover over element disappears when i click on it

Hi everyone,

I have added a hover over opacity animation over an element, but after it appears when I want to click on it it disappears. It is only be visible if I don’t click on it although I need to click because it’s a lightbox.

Does anyone know how to fix this?

Thanks

Can you share your read only link please?

Hi Aaron,

Here is the link, you see when I try to click the icon it disappears:
https://preview.webflow.com/preview/animation-test-dfba5b?utm_medium=preview_link&utm_source=designer&utm_content=animation-test-dfba5b&preview=1f0aa9aee496302e92083e60ae2c8d8e&mode=preview

Ok, what’s happening is that you have the following instructure:

And you added an interaction to the Div Block 12 that affects Lightbox Link 2 but because the Lightbox element it’s no inside the div you’re “hovering over” of the element that has the animation so the initial state comes in place. Hope this makes sense.

I created a small video to help you fix the issue:

https://d.pr/v/qiEbp8

In the video there’s a moment where I click change target and select the same element, this is important because animations ‘save’ the element affected using the position where the elements are but because we move the element inside the div technically it’s in another place so that’s why you need to select it again.

Thank you Aaron! That solves it.

1 Like