Display grid gallery title + description upon hover (+ some other questions), Avenue Template

I've seen variants of this question asked on this forum, and tried many of the proposed solutions but am still having no luck on the Avenue Template for Squarespace 7.0. I was trying to use some 7.1 templates but it seems like they removed quite a bit of the Title / Description functionality for galleries?  

Here's my particular situation:

I have roughly 130 images (each image is a different character illustration). I would like to upload and display all of these images to a single landing page, using a single, clean Grid Gallery. Each image has a unique Title (the character's name) and a unique Description (a brief character background, just a few lines), which are added to their respective fields of the Image Settings. I would like for users to be able to hover over a character, and be able to read the Title + Description text displayed over a 90% white overlay on the image. It would be ideal if I could have the text formatting dictated by my Header / Paragraph settings. 

I'm looking for Custom CSS to help solve this issue. Any advice? I'm also not beyond alternate solutions or templates, if it seems I'm missing an obvious / easy thing here.

--

Additionally, these 130 images (characters) each fall into a category (Good, Bad, Neutral, etc.) as well as some tags (location, traits, etc.). What would be the best way to allow users to look at the Gallery Grid of 130 images, but quickly filter to just see, for example, the Good character category? Is that a doable task, or would I have to create unique Gallery Grids for each Category and then create new pages / drop-down items for each? 

Any help is massively appreciated. These forums have been so helpful over the years—thanks all. 
 

Post a link to your page so we can help.

@rwp I'm afraid there isn't a ton to see on my working page—I was just starting it this weekend but most of the time has been spent researching and testing CSS (which has been unfruitful thus far). Right now it's just a grid of a handful of images—the first 3 or 4 have Title and Description copy, but I wanted to make sure I had the right solution before proceeding with the rest. The site is located at:

https://tunny-orange-dbxc.squarespace.com/

password: littlecreeps

See if this gets you started.

I think we can get the hover stuff done pretty easily, but first, look into the tags and categories.

https://support.squarespace.com/hc/en-us/articles/209114107-Organizing-Gallery-Pages

If it were me, and I use Avenue, I would create a blank page with a gallery block for each category of images. Those gallery blocks can be a grid, wall, slideshow, stack, or carousel. Avenue gallery pages are always stacked when viewed from an index page and a slideshow when viewed directly so to do what you want pages with gallery blocks will work out better. Once all these pages are made you put them all into an index page which will create thumbnails for all these galleries and in essence make them look like one big page here are two sites where I am doing just that. I have a whole lot of images on both these sites set up in may different ways. The second one has lots for sale  page and lots for rent page, take a look at those. My site has different categories of picutres I have taken and I am using various types of galleries, the last thumbnail under pictures is a wedding displayed as a grid. I have lightbox enabled for all pictures and I could have all kinds of text on hover if I wished. 

my random views derrick Lee parker

Deer Creek Motorcoach Resort Virginia Make Yourself at Home in the Blue Ridge Mountains

No, never been to the Rubber Tramp Rendezvous. I spend my time up in the mountains of VA, at the place shown in my second site, which I built as well.