Jump to content

Hide portfolio text overlay 7.1

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
  • Views 1.3k
  • Created
  • Last Reply
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

@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

Archived

This topic is now archived and is closed to further replies.


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