Jump to content

Changing opacity of image caption

Go to solution Solved by tuanphan,

Recommended Posts

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!

Link to comment
  • Replies 8
  • Created
  • Last Reply

Top Posters In This Topic

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. 

NN.jpg

Link to comment
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. 

NN.jpg

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?  

Link to comment
  • Solution
On 12/22/2022 at 1:12 AM, wildernessimages said:

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

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.