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

Hide portfolio text overlay 7.1

Question

Site URL: https://www.crxssplatfxrm.com/selected-artists

I have successfully used the following CSS to hide the hover text overlay from my portfolio, while keeping the hover colour overlay:

.portfolio-text {
    opacity: 0 !important;
}

However, I wish to add another portfolio to the site, on which I want to keep the hover text overlay – it seems that the above command affects all portfolios site-wide. Is there an addtion I can make to the CSS to specify the one portfolio?

Share this post


Link to post

7 answers to this question

Recommended Posts

  • 0

@matthewhodges

If you want to control which pages the portfolio text is hidden you have 2 options

1. (Easier) You can apply your CSS to the Page Injection. So if you have a portfolio on one page where you want the text hidden you would add your code here. This can be done on a per page basis
image.thumb.png.8077b78fa413848921bc164ea06c5c1a.png

2. (Advanced) You can target the collection ID (https://thirtyeightvisuals.com/blog/how-to-find-your-page-id-in-squarespace). Once you have the collection ID your code can be added to the custom CSS section
 

#collection-5ceea3e924a694485f25a8f4 .portfolio-text {
 opacity: 0 !important; 
}

 


Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Share this post


Link to post
  • 0
26 minutes ago, matthewhodges said:

Site URL: https://www.crxssplatfxrm.com/selected-artists

I have successfully used the following CSS to hide the hover text overlay from my portfolio, while keeping the hover colour overlay:

.portfolio-text {
    opacity: 0 !important;
}

However, I wish to add another portfolio to the site, on which I want to keep the hover text overlay – it seems that the above command affects all portfolios site-wide. Is there an addtion I can make to the CSS to specify the one portfolio?

This is the code where you want to hide the text on item 1 and 3, you can replicate it in any thing

.grid-item:nth-child(1) .portfolio-text,
.grid-item:nth-child(3) .portfolio-text{
    opacity: 0 !important;
}

image.thumb.png.145b600a70b246fbee03f43380195c00.png


I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Share this post


Link to post
  • 0
Posted (edited)
3 minutes ago, RyanDejaegher said:

@bangank36 that would work for applying it to items within a portfolio, @matthewhodges is asking how to apply this effect to a portfolio on a different page

Yes, it can be on any individuals pages custom code section, not sure what my problem is

Edited by bangank36
change

I am frontend dev that provide solutions to enhance feature of squarespace.com can't provide, please check my profile for more details

--- To Space And Beyond! ---

https://www.freelancer.com/u/BaNgan

Share this post


Link to post
  • 0
18 hours ago, RyanDejaegher said:

@matthewhodges

If you want to control which pages the portfolio text is hidden you have 2 options

1. (Easier) You can apply your CSS to the Page Injection. So if you have a portfolio on one page where you want the text hidden you would add your code here. This can be done on a per page basis
image.thumb.png.8077b78fa413848921bc164ea06c5c1a.png

2. (Advanced) You can target the collection ID (https://thirtyeightvisuals.com/blog/how-to-find-your-page-id-in-squarespace). Once you have the collection ID your code can be added to the custom CSS section
 


#collection-5ceea3e924a694485f25a8f4 .portfolio-text {
 opacity: 0 !important; 
}

 

Hi – thanks for the reply. Your first suggestion was not an option to me as I don't have a premium plan, but I did manage to get the second option to work, so thanks very much.

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