Jump to content

Hide portfolio text overlay 7.1

Go to solution Solved by RyanDejaegher,

Recommended Posts

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?

Link to comment
  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • Solution

@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

 

Link to comment
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.

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.