Lightbox with hover state and nested elements also having hover state fails to work properly

Hi,

I’ve put a button within a div, which appears as a hover over a lightbox. The button works perfectly within the designer and in the preview mode, but it is non-existent in the actual website.

The link applies to various lightboxes on the Portfolio page, the first being on the first row, second column.

I’m at a loss as to why…hopefully someone can help!

Thanks

Dan

Read Only:
https://preview.webflow.com/preview/wedesignlondon?preview=18c7f902641491e6ae190af9ef887a28

Website:
http://wedesignlondon.webflow.io/portfolio

In webflow the lightbox button div is set to be inside the Portfolio Lightbox element.

http://vincent.polenordstudio.fr/snap/0iis8.jpg

But in the exported code, it’s outside:

http://vincent.polenordstudio.fr/snap/0hm9f.jpg

So your button appears, but outside of the square element.

I don’t know why it does that. @PixelGeek any idea?

Try to change the structure maybe.

Thanks @vincent. Yes, it’s really strange. Perhaps a bug?

@cyberdave … is there a solution here?

Hi @DanUK1, thanks for the report, I am taking a look :slight_smile: cheers, Dave

Hi @DanUK1, it seems you have probably found some quirky behavior, where if you set up a lightbox with a hover state, and then have another element within the lightbox also with a hover state, that the second element nested inside the lightbox link fails to work properly.

Why this is happening I am not sure yet, but there is a better way to setup this hover effect :smile:

I would Highly recommend to change the structure, and use a hover interaction:

https://webflow.com/website/Demo-Kit
Page: Fade Overlay on Hover

Here is another example on my public page:

https://webflow.com/website/example-lightbox-hover

​I hope this helps. If not, let me know :slight_smile: Cheers, Dave

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