How can I get a gradient image overlay?

I was looking at another site made on squarespace recently (amandafarias.nyc), and was wondering how to achieve horizontal gradient overlays over an image and add text on top. I do think that these changes (on that site specifically) were made using CSS because the gradient modified as the page width changed. I was wondering if anyone knew how to code for something like this? thank you.

3 hours ago, sqsnewbie said:

I was looking at another site made on squarespace recently (amandafarias.nyc), and was wondering how to achieve horizontal gradient overlays over an image and add text on top. I do think that these changes (on that site specifically) were made using CSS because the gradient modified as the page width changed. I was wondering if anyone knew how to code for something like this? thank you.

Hi. Do you have an example/or mockup?

hi tuanphan, here's an example of what i'm trying to achieve. 

On 7/26/2021 at 1:21 PM, sqsnewbie said:

hi tuanphan, here's an example of what i'm trying to achieve. 

Can you share link to page in screenshot?

amandafarias.nyc (homepage, scroll down) 

23 hours ago, sqsnewbie said:

amandafarias.nyc (homepage, scroll down) 

Okay. Can you share link to your site/Which section you want to add gradient?

The gradient is applied to the image itself - probably with photoshop. See it here: 

Hi @tuanphan is there a way to accomplish this? I would like to add a gradient over the section background image from left to right (black 60% opacty to transparent) on the 3rd section title "22,400 people served each month in our community." 

https://fbcenla.squarespace.com/
password: design

Thanks for your help!

On 9/5/2023 at 12:21 PM, izza.weihaas said:

Hi @tuanphan is there a way to accomplish this? I would like to add a gradient over the section background image from left to right (black 60% opacty to transparent) on the 3rd section title "22,400 people served each month in our community." 

https://fbcenla.squarespace.com/
password: design

 

Thanks for your help!

I see you figured it out with this CSS code?

section[data-section-id="64f69374633e4f108dedc366"] .section-background-overlay, section[data-section-id="64f693d4ae069407cbd67437"] .section-background-overlay {
    opacity: .75 !important;
    background: linear-gradient(to right,#000,transparent);
}

@tuanphan Yes, I did figure it out-- thank you!