Jump to content

Adjust Opacity of Dynamic-Text-Container of Image Block: Collage

Recommended Posts

Site URL: https://www.alexcosseyphotography.com/

Hi there

I'm brand new to anything CSS related and have previously survived entirely within the limits of Squarespace's basic customisation.

In a previous build of my website I was able to adjust the opacity of text box (I think it's called a Dynamic-Text-Container in CSS) that overlaps the image of a Collage image block. Since the introduction of the new Site Styles ta I can't work out how to adjust this.

Currently my text box is completely opaque and I would like to see approx 50% through to the image underneath; is anyone able to share some CSS code that will allow me to play around with the opacity of all of the Collage image blocks at once?

Many thanks in advance.

P.S. Website in question is www.alexcosseyphotography.com; see "Family Photography", "Wedding Photography" and "Newborn Photography" image blocks on homepage.

Screenshot 2021-03-15 at 11.44.33.png

Link to comment
  • 2 weeks later...
  • Replies 5
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Hi. It looks like you solved with this CSS?

.white .sqs-block-image .design-layout-collage .image-card {
    background-color: rgba(241,241,239,.78);
}

On Mobile, I see this space

Top text block has some blank paragraph. You can remove them to fix space

image.thumb.png.524b61bd6918efc0f58bea4167237f4e.png

On tablet, it doesn't look good. Do you want to increase width or reduce text size?

image.thumb.png.8f24d08548a9b76ac3af979acc51873e.png

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...
On 4/9/2021 at 1:21 AM, Siroy said:

I love this solution. However would it also be possible to add some code to have every card in a different colour, opacity and dimension?
That would be great!
Many thanks in advance.

Use this code.

#block-id .image-card {
    background-color: rgba(241,241,239,.78);
}

Use this tool to find block id. 

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
  • 1 year later...

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.