Jump to content

"Hide Index Thumb Titles" for specific thumbnails only.

Recommended Posts

Site URL: https://www.thislandisdigital.com/

So I'll just say I'm not great with CSS as it applies to Squarespace (so far). I generally understand a decent amount of the action code with the brackets but identifying the right subjects (#thisPiece .thatPart) has given me too much trouble to get much done. Extra explanation on those subjects would be appreciated.

Question: How do I selectively hide or otherwise alter (color, animation) the thumbnail titles only for specific pages within an index?

Context: My site, ThisLandisDigital.com, uses the Avenue template and a grid of thumbnails organize my portfolio. It's common to include project logos for games and films within related thumbnails, so I've already got a layer of text for the first several images. When I enable the default index titles, the text color is not consistently legible and the text is redundant for some thumbnails. Similarly, when I try including titles directly in all of the thumbnail images, the whole page becomes much harder to read at a glance (the GIFs are distracting enough).

The site style controls also don't let me choose top/bottom positions for the title, only left/center/right and overlay/under.

I don't know yet what solution will be best or even whether playing with titles on some of the thumbnails will work at all, but to experiment with it I'll need to be able to single out each page's thumbnail and toggle its title visibility.

Bonus Question: How would I swap the thumbnail images themselves when hovered such that I could design the titles into the images manually or possibly reduce my GIFs to hover reactions?

 

Thanks.

Link to comment
  • Replies 5
  • Views 913
  • Created
  • Last Reply

to hide title for spcific thumbnails, use this CSS

a.project[href="/the-price-of-freedom-assets/"] .project-title {
    display: none;
}
a.project[href="/home-a-drone-assets/"] .project-title {
    display: none;
}

replace url in above code.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Thanks!

Question #2 I can't seem to find how to selectively change the color yet (though I'm having a better time inspecting the page right now). One text color doesn't really work on all of the thumbnails so I'd like to play with dark/light text depending on the thumbnails.

Question #3 An alternative to the titles would be to swap out the thumbnail images when the mouse hovers. Any idea how I can go about doing this?

Link to comment
23 minutes ago, Ben Miller said:

Thanks!

Question #2 I can't seem to find how to selectively change the color yet (though I'm having a better time inspecting the page right now). One text color doesn't really work on all of the thumbnails so I'd like to play with dark/light text depending on the thumbnails.

Question #3 An alternative to the titles would be to swap out the thumbnail images when the mouse hovers. Any idea how I can go about doing this?

Q2. 

a.project[href="/home-a-drone-assets/"] .project-title {
    color: red !important;
}

Q3.

Change to another image on hover?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.