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

How to add an overlapping background colour behind photo in image blocks?

Question

This is an example of what I want to create with the image blocks. An overlapping block of colour behind the photo:

Auburn-Brand-Sheet-Artboard-9.thumb.jpg.6cdd8c36a310735c18931c49153e001f.jpg

Is there a CSS code I can insert to create this?

Let me know if you need any info. Thanks!

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

It's almost always best to provide the URL to the site/page in question along with the view-only password if necessary (for sites in trial mode, etc.). However, in this case you may not even have an example page setup.

Here's an example in Brine which I whipped up.

It uses "card" style image blocks in a single index section/page. Of course, your page ID would be different, and you'd probably want to more specifically target the section. You'll also want to mess with the padding on the text in order to get it where you want.

You could do the same thing with regular 'ol image and text blocks and would probably have a bit more flexibility, but I figured this was good enough to serve as a proof of concept for you so as to answer your question, "yes".

#page-5d9e40adc1c17f087e491930 {
  background: ~"linear-gradient(#BBB, #BBB) no-repeat center/1px 100%"; /*https://stackoverflow.com/a/53551089/5338581*/
}

.design-layout-card .intrinsic {
  padding-top: 50px;
  padding-bottom: 50px;
}

.design-layout-card.image-position-right .intrinsic {
  padding-right: 6%;
  margin-left: -6%;
  background: linear-gradient(90deg, rgba(0,0,0,0) 40%, #FFC0CB 40%);
}

.design-layout-card.image-position-left .intrinsic {
  padding-left: 6%;
  margin-right: -6%;
  background: linear-gradient(270deg, rgba(0,0,0,0) 40%, #FFBB22 40%);
}

.sqs-block-image .design-layout-card .image-card-wrapper {
  background-color: transparent;
}

Do let me know how this works for you.

Edited by brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0
On 10/9/2019 at 5:00 PM, brandon said:

It's almost always best to provide the URL to the site/page in question along with the view-only password if necessary (for sites in trial mode, etc.). However, in this case you may not even have an example page setup.

Here's an example in Brine which I whipped up.

It uses "card" style image blocks in a single index section/page. Of course, your page ID would be different, and you'd probably want to more specifically target the section. You'll also want to mess with the padding on the text in order to get it where you want.

You could do the same thing with regular 'ol image and text blocks and would probably have a bit more flexibility, but I figured this was good enough to serve as a proof of concept for you so as to answer your question, "yes".


#page-5d9e40adc1c17f087e491930 {
  background: ~"linear-gradient(#BBB, #BBB) no-repeat center/1px 100%"; /*https://stackoverflow.com/a/53551089/5338581*/
}

.design-layout-card .intrinsic {
  padding-top: 50px;
  padding-bottom: 50px;
}

.design-layout-card.image-position-right .intrinsic {
  padding-right: 6%;
  margin-left: -6%;
  background: linear-gradient(90deg, rgba(0,0,0,0) 40%, #FFC0CB 40%);
}

.design-layout-card.image-position-left .intrinsic {
  padding-left: 6%;
  margin-right: -6%;
  background: linear-gradient(270deg, rgba(0,0,0,0) 40%, #FFBB22 40%);
}

.sqs-block-image .design-layout-card .image-card-wrapper {
  background-color: transparent;
}

Do let me know how this works for you.

Hi Brandon,

Why gradients? Is that important? I can't see how it affected the outcome...


Eliza Gilbert, etg design studio | Greensboro, NC & Hoboken, NJ
etgilbertdesign.com | IG @etgdesignstudio | FB @etgdesignstudio

👉🏻Snag a FREE Squarespace 7.0 Setup Checklist

Share this post


Link to post
  • 0
Posted (edited)

Hi @etgilbert.

Well, it's been a long time, so I don't recall if I considered or attempted other approaches. But  "how it affected the outcome...", was to create colored boxes behind the images. Perhaps you mean "affected the outcome compared to some other approach" such as using pseudo elements or JavaScript. Or perhaps compared to doing something with absolute positioning and breaking the relationship between the wrapper and the contents (that could work as well). You might even be able to do it with box-shadow or background positioning. There are probably multiple ways to solve this; I suppose the one above is what seemed easiest (or fastest, or most reliable, or most easily modified later) to me at the moment.

Edited by brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

@brandon

Oops! I meant why gradient as opposed to a solid HEX color alone. I wasn't clear. I realize the gradient rgba has it completely translucent, so I see now that it's transparent, then solid. This is def cleaner than what I thought in my head.


Eliza Gilbert, etg design studio | Greensboro, NC & Hoboken, NJ
etgilbertdesign.com | IG @etgdesignstudio | FB @etgdesignstudio

👉🏻Snag a FREE Squarespace 7.0 Setup Checklist

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...