Changing Color on Inline Image Block Overlay

Site URL: https://www.alexanderkarlmartinwilhelm.de/

Hello,

i would like to change the transparent, greyish colour of that overlay (inline image block), but i am not able to locate the right place for that in my design options. I’ve also tried a few custom css options, but i am not even able to identify the right name.

My guessing so far:

Is it possible to change that colour at all?
Thanks for your support ...
 

44 minutes ago, alexanderkarlmartinwilhelm said:

Site URL: https://www.alexanderkarlmartinwilhelm.de/

Hello,

i would like to change the transparent, greyish colour of that overlay (inline image block), but i am not able to locate the right place for that in my design options. I’ve also tried a few custom css options, but i am not even able to identify the right name.

My guessing so far:

.image-caption-wrapper-overlay
.image-block: hover
 

Is it possible to change that colour at all?
Thanks for your support ...
 

Try

section[data-section-id="623f69725cbd136c43eada1a"] .image-caption-wrapper {
  background: blue !important;
}

Change the color as you wish

Let me know how it goes

Hello Bangank,

thanks a lot, it works out fine. 🤩

On 4/18/2022 at 5:11 PM, bangank36 said:

Try

section[data-section-id="623f69725cbd136c43eada1a"] .image-caption-wrapper {
  background: blue !important;
}

Change the color as you wish

Let me know how it goes

I'm needing the same thing but when I placed this in Custom CSS nothing happened.

I'm also wanting to adjust the size or padding of the colored caption box so it's not taking up so much empty space – is that possible?

On 5/25/2022 at 3:39 AM, MattyT208 said:

I'm needing the same thing but when I placed this in Custom CSS nothing happened.

I'm also wanting to adjust the size or padding of the colored caption box so it's not taking up so much empty space – is that possible?

Can you share link to page where you have problem?

10 hours ago, tuanphan said:

Can you share link to page where you have problem?

https://cinnamon-arugula-lbx4.squarespace.com/new-homepage-test-1

yil1TONG4toft*ib

21 hours ago, MattyT208 said:

https://cinnamon-arugula-lbx4.squarespace.com/new-homepage-test-1

yil1TONG4toft*ib

The url doesn't exist. Can you check it again?

On 5/27/2022 at 4:43 AM, tuanphan said:

The url doesn't exist. Can you check it again?

Sorry, I forgot that it was disabled. Please try accessing it again.

17 hours ago, MattyT208 said:

Sorry, I forgot that it was disabled. Please try accessing it again.

Add to Design > Custom CSS

figcaption.image-caption-wrapper {
    background-color: transparent !important;
}

11 hours ago, tuanphan said:

Add to Design > Custom CSS

figcaption.image-caption-wrapper {
    background-color: transparent !important;
}

 

This worked as far as changing the box color but is there a way to adjust size of caption boxes and also adjust the opacity?

12 hours ago, MattyT208 said:

This worked as far as changing the box color but is there a way to adjust size of caption boxes and also adjust the opacity?

You mean width or height?

You can use rgba color

figcaption.image-caption-wrapper {
    background-color: rgba(0,0,0,0.25) !important;
}

5 hours ago, tuanphan said:

You mean width or height?

You can use rgba color

figcaption.image-caption-wrapper {
    background-color: rgba(0,0,0,0.25) !important;
}

 

Both the height and width, if possible. 

16 hours ago, MattyT208 said:

Both the height and width, if possible. 

Try this new code

figcaption.image-caption-wrapper {
    background-color: rgba(247,148,29,.6) !important;
    max-height: 100% !important;
    top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

8 hours ago, tuanphan said:

Try this new code

figcaption.image-caption-wrapper {
    background-color: rgba(247,148,29,.6) !important;
    max-height: 100% !important;
    top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

 

That worked perfectly, thank you.

On 6/3/2022 at 7:24 AM, tuanphan said:

Try this new code

figcaption.image-caption-wrapper {
    background-color: rgba(247,148,29,.6) !important;
    max-height: 100% !important;
    top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

 

Hello,

I also need to change the overlay background colour to transparent but it doesn't work for me... could you help?

My site URL: https://www.leilaarenou.com/nikki

Thanks a lot

On 6/3/2022 at 12:24 AM, tuanphan said:

Try this new code

figcaption.image-caption-wrapper {
    background-color: rgba(247,148,29,.6) !important;
    max-height: 100% !important;
    top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

 

So this did allow me to adjust height, placement, color, etc. but it also added scrolling controls to the right side of the caption boxes – is there a way to get rid of those? See attachment.

https://cinnamon-arugula-lbx4.squarespace.com/new-homepage-test-1

PW: yil1TONG4toft*ib

On 6/6/2022 at 3:46 AM, leilaaliel said:

Hello,

I also need to change the overlay background colour to transparent but it doesn't work for me... could you help?

My site URL: https://www.leilaarenou.com/nikki

Thanks a lot

Change .6 to 0

On 6/6/2022 at 9:24 PM, MattyT208 said:

So this did allow me to adjust height, placement, color, etc. but it also added scrolling controls to the right side of the caption boxes – is there a way to get rid of those? See attachment.

https://cinnamon-arugula-lbx4.squarespace.com/new-homepage-test-1

PW: yil1TONG4toft*ib

Use overflow hidden

figcaption.image-caption-wrapper {
    background-color: rgba(231,124,20,.6) !important;
    max-height: 18% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
}

On 6/10/2022 at 9:33 PM, tuanphan said:

Change .6 to 0

Use overflow hidden

figcaption.image-caption-wrapper {
    background-color: rgba(231,124,20,.6) !important;
    max-height: 18% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
}

 

This works. However, how do I limit this so it only applies to a certain page? When I pasted this into Custom CSS window it applied it site-wide. When I pasted it into the particular page Code Injection window, it didn't work. Any suggestions?

20 hours ago, MattyT208 said:

This works. However, how do I limit this so it only applies to a certain page? When I pasted this into Custom CSS window it applied it site-wide. When I pasted it into the particular page Code Injection window, it didn't work. Any suggestions?

With code in Page Code Injection, you need to wrap in style tag.

<style>
  figcaption.image-caption-wrapper {
    background-color: rgba(231,124,20,.6) !important;
    max-height: 18% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
}
</style>

12 hours ago, tuanphan said:

With code in Page Code Injection, you need to wrap in style tag.

<style>
  figcaption.image-caption-wrapper {
    background-color: rgba(231,124,20,.6) !important;
    max-height: 18% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
}
</style>

 

Thank you, that worked great. I'm still learning 🙂

On 6/15/2022 at 10:46 AM, tuanphan said:

With code in Page Code Injection, you need to wrap in style tag.

<style>
  figcaption.image-caption-wrapper {
    background-color: rgba(231,124,20,.6) !important;
    max-height: 18% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden !important;
}
</style>

 

It worked thanks so much!