How to Change the background color of your collage on a collage image block WITH CSS

Site URL: https://lindyglow.squarespace.com/

Hello,

I'm hoping someone can help me figure out how to change the color of the collage block. I know you can change it in the style editor, but I would like to change it through CSS.

I have two collage blocks on my client's site and I'd like one of them to have a different colored background.

I'm trying to find the code to target it. Here's what I was able to find and come up with: I can't seem to figure out how to put them in order and target that collage block to change its text box color.

.image-card-wrapper
.image-card sqs-dynamic-text-container
.image-title-wrapper
.image-title .sqs-dynamic-text

See collage block towards the bottom, I'd like the color to be white so that it doesn't blend in with the pink background.
https://lindyglow.squarespace.com/services 
Password: glow

Use this CSS

div#block-yui_3_17_2_1_1599698725699_50131 .image-card {
    background: red;
}

Find image block id. https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

@tuanphan It worked! Thank you so much! I knew it was easy enough I forgot the div when trying to do this myself. Thank you!

What about using an image as background for all collage image blocks, meaning site-wide?

On 9/12/2020 at 10:43 PM, tuanphan said:

Use this CSS

div#block-yui_3_17_2_1_1599698725699_50131 .image-card {
    background: red;
}

Find image block id. https://chrome.google.com/webstore/detail/squarespace-collectionblo/bggpdfnccodbnmcndckmeehdjkjojkde

On 6/2/2021 at 11:24 AM, IMO said:

What about using an image as background for all collage image blocks, meaning site-wide?

 

Try this

div#block-yui_3_17_2_1_1599698725699_50131 .image-card {
    background-image: url(https://cdn.pixabay.com/photo/2020/12/14/11/18/cat-5830643__340.jpg);
	background-repeat: no-repeat;
	background-size: cover;
}

Hi @tuanphan

Would it be possible to change the background of the Image Block Collage Text block on Hover to achieve the below idea?

Cheers,

Roland

14 hours ago, RolandFuseHub said:

Hi @tuanphan

Would it be possible to change the background of the Image Block Collage Text block on Hover to achieve the below idea?

Cheers,

Roland

Possibile. If you share link to page in screenshot, we can give code easier

3 hours ago, tuanphan said:

Possibile. If you share link to page in screenshot, we can give code easier

Hi @tuanphan

https://devstanbury.squarespace.com/?password=sneakpeek

Early development... 

Thanks mate!

On 9/16/2021 at 11:16 PM, RolandFuseHub said:

Hi @tuanphan

https://devstanbury.squarespace.com/?password=sneakpeek

Early development... 

Thanks mate!

Use this CSS

.design-layout-collage .image-card {
    background-color: red !important;
}

25 minutes ago, tuanphan said:

Use this CSS

.design-layout-collage .image-card {
    background-color: red !important;
}

 

I was hoping to have that box turn red on hover? 😉

13 hours ago, RolandFuseHub said:

I was hoping to have that box turn red on hover? 😉

Red when hovring text, or hovering whole image/text?

1 hour ago, tuanphan said:

Red when hovring text, or hovering whole image/text?

Red when hovering over the Text Card with the text in it. 🙏🏽

On 9/20/2021 at 9:43 PM, RolandFuseHub said:

Red when hovering over the Text Card with the text in it. 🙏🏽

It looks like you changed layout. Do you still need help?

1 hour ago, tuanphan said:

It looks like you changed layout. Do you still need help?

 

My apologies... we just changed it and should've told you.