Changing opacity of image caption

Hi, does anyone know if it is possible to change the opacity of the image caption? I have added a CSS code that enables the caption to always show on mobile (to avoid the confusing dot that one must click in order to display the caption), but I am finding the caption overlay to be exceptionally dark. I am wondering if there is a way to reduce the opacity of this so that the image underneath the caption shows up better? Thanks for any help!

Can you share your website URL and the page you want to change the caption opacity on?

15 hours ago, Ziggy said:

Can you share your website URL and the page you want to change the caption opacity on?

Sure, here is an example of one of my gallery pages: New Releases — Zack Clothier Photography

I would like to change the opacity of the dark caption box that appears when hovering your mouse over the image...

Thanks for sharing that, sorry, but I can't see any hover effect on that page in order to help you.

On 12/13/2022 at 2:48 AM, Ziggy said:

Thanks for sharing that, sorry, but I can't see any hover effect on that page in order to help you.

You have to click on an image, and then when hovering a mouse over the image it displays the caption information. That dark caption overlay is what I am trying to lighten up. It's too opaque on mobile, obscuring a portion of the image. I've added a screenshot of it here and marked it with a red arrow. 

On 12/17/2022 at 12:19 PM, wildernessimages said:

You have to click on an image, and then when hovering a mouse over the image it displays the caption information. That dark caption overlay is what I am trying to lighten up. It's too opaque on mobile, obscuring a portion of the image. I've added a screenshot of it here and marked it with a red arrow. 

You can use this new code to enable caption on mobile

@media screen and (max-width:640px) {
.yui3-lightbox2 .sqs-lightbox-meta {
    opacity: 1 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
}
}

To change opacity on desktop, use this code

.yui3-lightbox2 .sqs-lightbox-meta.overlay-description-visible {
    background-color: rgba(0,0,0,0.2) !important;
}

0.2 is opacity

17 hours ago, tuanphan said:

You can use this new code to enable caption on mobile

@media screen and (max-width:640px) {
.yui3-lightbox2 .sqs-lightbox-meta {
    opacity: 1 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
}
}

To change opacity on desktop, use this code

.yui3-lightbox2 .sqs-lightbox-meta.overlay-description-visible {
    background-color: rgba(0,0,0,0.2) !important;
}

0.2 is opacity

Great, thank you! Is there any way to change the opacity on mobile also?  

On 12/23/2022 at 8:14 PM, tuanphan said:

On mobile, you can use this

@media screen and (max-width:640px) {
.yui3-lightbox2 .sqs-lightbox-meta.overlay-description-visible {
    background-color: rgba(0,0,0,0.5) !important;
}
}

 

Great! Thank you so much!