Need help with CSS For Visibility of Carousel Description Text/Overlay

Hi Squarespace Community,

We have a Carousel gallery of media relations work where we'd like simple SEO descriptions to appear on hover with overlay. I was able to execute all of the initial setup, but I cannot change the colour of the text or opacity of the overlay in the gallery editor. An increased background opacity or text colour change, or even a drop shadow CSS solution could allow the text to be more visible on various images. We are comfortable executing this as site-wide CSS, as the changes wouldn't impact any of our other galleries. 

If you have any CSS ideas we can test out that would be so greatly appreciated! TIA!

@HeatherDevonComms Hi! Can you share your site URL?

Hi Sam @Lesum! Here is the link: https://devoncommunications.ca/media-relations

Sorry, it requested the link while making the post so I assumed it was visible! Thank you for taking a look!

@HeatherDevonComms Hi! You can add this code under Custom CSS to change the overlay opacity of background.

.sqs-gallery-block-slideshow.sqs-gallery-block-meta-position-bottom .meta {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(30, 30, 30, .9) 100%) !important;
}

To change the font color you can add this code:

.sqs-gallery-block-slideshow .meta .meta-title {
    color: #494141 !important;
}

Thank you so much!!