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

"Hide Index Thumb Titles" for specific thumbnails only.


Ben Miller

Question

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
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Posted Images

5 answers to this question

Recommended Posts

  • 1

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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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