Streaming live at 10am (PST)

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


#1

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


#2

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

But in the exported code, it's outside:

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.


#3

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

@cyberdave ... is there a solution here?


#4

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


#5

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 smile Cheers, Dave


#6

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