Custom effect for text overlay in Portfolio

Site URL: https://puma-orb-9lss.squarespace.com/work

Hi,

Regarding the Portfolio page and the overlay titles for project images (in Squarespace 7.1), 

I was wondering if there is any way I could get a similar effect as illustrated in the example image I attached. Note: I want to avoid darkening the entire image, and instead darken only the background behind the text.

Also, there is currently no option to have the title in the middle bottom. Is there a way to do so with CSS?

Thanks

It seems you solved? To center text, add this to Home > design . CUstom CSS

.portfolio-text {
    text-align: center !important;
}

On 7/5/2020 at 10:31 AM, tuanphan said:

It seems you solved? To center text, add this to Home > design . CUstom CSS

.portfolio-text {
    text-align: center !important;
}

 

Thanks! 

That picture was an example from a non-Squarespace site actually. I'm trying to do something similar in Squarespace. 

I'm also wondering if it is possible to darken the background only behind the title. Specifically, a black gradient to come up from the bottom of the image, so that the title stands out more.

I found an example/tutorial (Link) where I can get the gradient behind text, so I'm going to try and implement a similar effect on the portfolio images. But I'm not that good at coding so I'd appreciate any help!

1 hour ago, Marzon said:

Thanks! 

That picture was an example from a non-Squarespace site actually. I'm trying to do something similar in Squarespace. 

I'm also wondering if it is possible to darken the background only behind the title. Specifically, a black gradient to come up from the bottom of the image, so that the title stands out more.

I found an example/tutorial (Link) where I can get the gradient behind text, so I'm going to try and implement a similar effect on the portfolio images. But I'm not that good at coding so I'd appreciate any help!

 

Made significant progress myself! 

Here is what I have so far.

.portfolio-overlay {
  	background: linear-gradient(to bottom, #ffffff00 50%, #000000)}

What I cant seem to figure out is I don't know how to override the existing overlay. Because I need the black to fade to nothing. But the existing overlay prevents #FFFFFF00 from being transparent (it's just showing as white (#FFFFFF) and ignoring the 00).