Create semi-transparent background box on image blocks?

Site URL: https://dalmatian-piccolo-3aby.squarespace.com/clients

Hi there,

I am trying to create a series of images with captions that overlay the photos. I've done this using the poster feature on image blocks.

What am trying to do is style these captions so that they appear on a semi transparent block. All of these photos will be square so I am trying to create caption-background blocks that are square at like 30 or 50% opacity, in order to honor the image behind it.  

Site: (scroll to "PRESS")
Password: Steak1

https://dalmatian-piccolo-3aby.squarespace.com/clients

As you can see in the image I added I've put black background color on the text which does not achieve the aesthetic I am aiming for...

Input is appreciated!! 

.sqs-block-image .design-layout-poster .image-card {
display:flex;
background: rgba(0,0,0,0.5);
align-items: center;
justify-content: center;
min-height: 250px;
}

Hello,

Try the following code and let me know if this works and is the right aesthetic. You can adjust the transparency using different values for the background color. You may need to insert the data ID or collection ID if you don't want to target all of the other poster blocks outside of that page.

Hope this helps!

-Dan

14 hours ago, Wolfsilon said:

.sqs-block-image .design-layout-poster .image-card {
display:flex;
background: rgba(0,0,0,0.5);
align-items: center;
justify-content: center;
min-height: 250px;
}

Hello,

Try the following code and let me know if this works and is the right aesthetic. You can adjust the transparency using different values for the background color. You may need to insert the data ID or collection ID if you don't want to target all of the other poster blocks outside of that page.

Hope this helps!

-Dan

 

 

You are my hero!!!!!! It worked thank you SO much!!! 

@Wolfsilon One more question: the code above works to create the transparent box but the text is aligned wonky. I think this is because the Title and Subtitle are aligned next to each other, not stacked. Any advice how to fix?

@helianthus Looks fine here. What problem with text?

@Wolfsilon

Hey!

Thanks for this code. I'm trying to make the width of the block match the width of the image block. Do you know how I would amend the code? I tried adding a line with  "min-width: 100px;" but it didn't work, hah!

11 hours ago, VictoriaJ said:

@Wolfsilon

Hey!

Thanks for this code. I'm trying to make the width of the block match the width of the image block. Do you know how I would amend the code? I tried adding a line with  "min-width: 100px;" but it didn't work, hah!

 

 

Can you share link to page where you have problem? We can help easier

@tuanphan

Yep! https://quillfish-krill-n72m.squarespace.com/ 

Thanks so much for helping out!

On 8/18/2021 at 11:28 PM, VictoriaJ said:

@tuanphan

 

Yep! https://quillfish-krill-n72m.squarespace.com/ 

Thanks so much for helping out!

Hi,

Sorry for the delay!

Which blocks are you referring to?

@tuanphan

No worries! I'm looking to match the semi-transparent background box on the image to the width of the image block. 

I'm trying to create more or less the same look and even tried the above code but it hid the text and wasn't centering it either. Image for reference below. I'd also like to try for the text box to appear only while hovering. If someone could please advice. Thank you! @tuanphan @Wolfsilon

On 2/5/2022 at 9:03 PM, Tami21 said:

I'm trying to create more or less the same look and even tried the above code but it hid the text and wasn't centering it either. Image for reference below. I'd also like to try for the text box to appear only while hovering. If someone could please advice. Thank you! @tuanphan @Wolfsilon

Can you share link to page in screenshot?

15 hours ago, tuanphan said:

Can you share link to page in screenshot?

Link: https://bassoon-tomato-7pzf.squarespace.com

On 2/9/2022 at 11:46 AM, Tami21 said:

Link: https://bassoon-tomato-7pzf.squarespace.com

Password: hello21

 

Thank you!

Incorrect password

On 2/14/2022 at 1:51 AM, tuanphan said:

Incorrect password

Please try the following, thank you!

Link: https://bassoon-tomato-7pzf.squarespace.com

On 2/15/2022 at 2:09 PM, Tami21 said:

Please try the following, thank you!

 

Link: https://bassoon-tomato-7pzf.squarespace.com

Password: hello22

 

Thank you. You mean

Intial: Show image

Hover: Show image, overlay, title, description, button

Is this right?

On 2/19/2022 at 4:29 PM, tuanphan said:

Thank you. You mean

Intial: Show image

Hover: Show image, overlay, title, description, button

Is this right?

Yes, exactly! Except for the buttons which I want to show in both the initial and hover. If you could kindly help. Thank you once again.

On 2/19/2022 at 4:29 PM, tuanphan said:

Thank you. You mean

Intial: Show image

Hover: Show image, overlay, title, description, button

Is this right?

Hello @tuanphan Just following up regarding this:

Yes, exactly! Except for the buttons which I want to show in both the initial and hover. If you could kindly help. Thank you once again.

Thank you!

On 2/24/2022 at 10:50 AM, Tami21 said:

Hello @tuanphan Just following up regarding this:

Yes, exactly! Except for the buttons which I want to show in both the initial and hover. If you could kindly help. Thank you once again.

Thank you!

Try adding to Design > Custom CSS

@media screen and (min-width: 992px) {
div#page-section-61e10fec1cefee1fa802b600 .image-card.sqs-dynamic-text-container {
    opacity: 0;
}

div#page-section-61e10fec1cefee1fa802b600 .sqs-block.image-block.sqs-block-image:hover  .image-card.sqs-dynamic-text-container {
opacity: 1;
transition: .3s ease;
}
}

On 2/26/2022 at 11:59 AM, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (min-width: 992px) {
div#page-section-61e10fec1cefee1fa802b600 .image-card.sqs-dynamic-text-container {
    opacity: 0;
}

div#page-section-61e10fec1cefee1fa802b600 .sqs-block.image-block.sqs-block-image:hover  .image-card.sqs-dynamic-text-container {
opacity: 1;
transition: .3s ease;
}
}

Thank you so much @tuanphan that worked however the buttons disappear. What should I apply so that the buttons at the bottom remain? Much appreciated.

1 hour ago, Tami21 said:

 

On 2/26/2022 at 11:59 AM, tuanphan said:

Try adding to Design > Custom CSS

@media screen and (min-width: 992px) {
div#page-section-61e10fec1cefee1fa802b600 .image-card.sqs-dynamic-text-container {
    opacity: 0;
}

div#page-section-61e10fec1cefee1fa802b600 .sqs-block.image-block.sqs-block-image:hover  .image-card.sqs-dynamic-text-container {
opacity: 1;
transition: .3s ease;
}
}

 

Other than the button not being visible on the initial image, it also seems that on hover the buttons aren't clickable and the text is faded. It's as if the overlay grayscale is on top of the text instead over it. Image below for reference. Is there any way that the overlay can be more white so that the text is standing out while hovering as well? Please advice. Thank you!