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

Custom effect for text overlay in Portfolio


Recommended Posts

Posted (edited)

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

Annotation 2020-07-02 124414.jpg

Edited by Marzon
Link to post
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Popular Posts

It seems you solved? To center text, add this to Home > design . CUstom CSS .portfolio-text { text-align: center !important; }  

Posted Images

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

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 2 weeks later...
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!

 

Link to post
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). 

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...