First click on lightbox image comes up dark with very low opacity

Very similar issue to this post in 2017: Lightbox Not Displaying

Read only link:
https://preview.webflow.com/preview/hdwip2022?utm_medium=preview_link&utm_source=designer&utm_content=hdwip2022&preview=1c7ce570e2caa676bd91d4116813fced&pageId=6217c87cc993e54eaf9b1d99&workflow=preview

I was having this lightbox issue happening on other pages within the project, so I created a blank page from scratch to strip out all potential variables — this page has no z indexes, no symbols, no nav, no other sections or anything. Yet I am still having same issue — when I click on the lightbox image the FIRST time, the lightbox comes up but it’s way too dark, it looks like I’ve set opacity to 5%. What gives? Frustrated…

After the first click, then it seems to work as normal. I have removed all z indexes, I tried multiple background colors & transparent… I tried eliminating all class names and settings on both the “image” and the “Lightbox Link” and I even got rid of the “multiply” blend setting on images. All produces the same result.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi Drew,

The issue is with the image blending mode. Here’s what I did to resolve the problem:

Select one of your images (or any image without a class applied, really.) Head over to the class selector, click on it, and choose All Images.
image

Scroll down to Blending, click on it, and choose Reset.
image

Your lightbox should now function as intended. Hope this helps! Let me know if you have any further questions.

Thanks @ColemanChrisB for researching this. Unfortunately, as I said in my original post — “I even got rid of the ‘multiply’ blend setting on these images” — anyway I just tried this again, but still to no avail. I gave the Lightbox images a new class called “Lightbox no blend” where the blend setting is “Normal.”

https://preview.webflow.com/preview/hdwip2022?utm_medium=preview_link&utm_source=designer&utm_content=hdwip2022&preview=1c7ce570e2caa676bd91d4116813fced&pageId=6217c87cc993e54eaf9b1d99&workflow=preview

https://hdwip2022.webflow.io/lightbox-test

Thanks for this, Drew. I took a quick video showing what I’m doing here, just to make sure we’re both on the same page. Let me know if you’re still seeing different behavior after following this, and we’ll go from there.

1 Like

Thank you so much for the video! I had the same problem - and initial response. So thanks for taking the extra step and demonstrating it visually. Truly helpful.

1 Like