Squarespace 7.1 CSS to customize opacity in image block collage

Site URL: http://www.involuntaryicon.com/accessories

Hi!

I need to change the opacity of the white background rectangle in the image block collage to 50%. Can someone help me with a CSS?

http://www.involuntaryicon.com/accessories

Thank you

Francesca

You can use any color picker to select semi-transparent color to get it hex code and add this snippet to custom css

.sqs-block-image .design-layout-collage .image-card {
    background-color: #ffffff8f;
}

Hi @bangank36, thank you for your reply.  I add your code on the design CSS, but it doesn't change the opacity of the white rectangle

17 minutes ago, francescalo said:

Hi @bangank36, thank you for your reply.  I add your code on the design CSS, but it doesn't change the opacity of the white rectangle

Try this

.sqs-block-image .design-layout-collage .image-card {
    background-color: rgb(255 255 255 / 56%);
}

Just now, francescalo said:

it gives me this error

 

 

error evaluating function `rgb`: color functions take numbers as parameters

That custom css is too bad, sorry. Let's use custom code injection instead

Instruction here

<style>
.sqs-block-image .design-layout-collage .image-card {
    background-color: rgb(255 255 255 / 56%);
}
</style>

just to be cure @bangank36, where I have to copy the injection code?

7 minutes ago, francescalo said:

just to be cure @bangank36, where I have to copy the injection code?

Have you check the instruction?

Go to Settings->Advanced->Code Injection->Header

Just did it... unfortunately it is not working ;-(

2 minutes ago, francescalo said:

Just did it... unfortunately it is not working ;-(

 

If you invite me as collaborator I can have a look, bangank36@gmail.com

Hi Bangank26! sorry for my late reply, I wish to thank you for your useful help! It works now!

hey bangank36 i also had the same problem and worked through your steps and could not change the opacity.  I even inspected francescalo's page and still could not figure it out.  any chance you could help me out? thanks 

7 minutes ago, lyoder said:

hey bangank36 i also had the same problem and worked through your steps and could not change the opacity.  I even inspected francescalo's page and still could not figure it out.  any chance you could help me out? thanks 

What is your site url

hey im still building it, and havent published it yet, can you view it another way?

@lyoder

Have you tried doing is through the SS interface?

If you click on Card Background and then click in the middle of opacity slider at the very bottom. It's the part with the diagonal lines that is transparent of the left and opaque on the right. That little white circle you see in the middle there is the current setting.

That will change the opacity site wide. If you need to change just one. Then go with the CSS option.

Let us know how it goes.

creedon, thank you so much! i feel dumb because that was so easy. haha

@lyoder

No worries! I've been doing this stuff for awhile and sometimes I think CSS is the answer and then I remember that there is an SS way to do it! 😀