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

"Hide Index Thumb Titles" for specific thumbnails only.

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.

Share this post


Link to post

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.


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 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?

Share this post


Link to post
  • 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?

 


You can send your question to my email to get faster answer. I provide free priority support in this crazy time. 

How to Setup Password & Share URL - Free Templates - Free Code - CSS ID List

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...