Jump to content

Create semi-transparent background box on image blocks?

Recommended Posts

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
  • Replies 20
  • Created
  • Last Reply

Top Posters In This Topic

.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

 

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
  • 1 month later...
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
  • 5 months later...

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

image.thumb.png.625d475e62a2138de8252d4011c57a88.png

Edited by Tami21
Link to comment
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

image.thumb.png.625d475e62a2138de8252d4011c57a88.png

Can you share link to page in screenshot?

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

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

Link to comment
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;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

 

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

image.thumb.png.f06d59a3769ec7e7d8cd0aa9f83d72be.png

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.