"Hide Index Thumb Titles" for specific thumbnails only.

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.

I dont see title?

Avenue has an option to include titles over each of those thumbnail images when the mouse hovers over them. I currently have it disabled ("Hide Index Thumb Titles") so only my manually created titles appear.

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.

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?

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?