Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Create semi-transparent background box on image blocks?


helianthus

Question

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!! 

Screenshot 2021-07-14 173919.png

Link to comment
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

9 answers to this question

Recommended Posts

  • 0
.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

 

 

Link to comment
  • 0

 

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!!! 

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
  • 0
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?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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...