Change "Index Overlay/Background Colors" opacity for certain instances on individual pages (Henson/Tremont template)

I am creating a website using the Henson template (Tremont family).  I have used the Design > Site Styles to set up overlay opacities that I like, but there is one customization that does not seem possible with the built-in styles:

At the bottom of each "Portfolio" index (/brand, /data, and /web), the "collectionDesc" reappears, overlaid on the media image for that index.  I would like to add a white background overlay at 95% opacity when this happens, so the image looks ghosted and the text is more legible.  I can accomplish this by setting the Overlay Opacity under "Index Overlay/Background Colors" in Site Styles, but the images then continue to look ghosted on that page and throughout the site when the collection is active (mouse is hovering over the collection menu).

Is there code injection I could add to the header of the 3 portfolio index pages (brand, data, and web) or to the site-wide Custom CSS that will set the "Index Overlay/Background Colors" to #fff 95% opacity only when the "collectionDesc" is visible?

You can view the in-progress site at the link below:

https://gar-opossum-4ch5.squarespace.com/
password = chameleon

I have also attached images to help demonstrate the issue:

1. How the "collectionDesc" looks at the bottom of the /web index with no "Index Overlay/Background Colors" visible (opacity set to 0)
2. How I want the "collectionDesc" to look at the bottom of the /web index *
3. How I want the collection media to appear on hover *

* note: #2 and #3 are mutually exclusive using the built-in Site Styles (increasing opacity to achieve #2 ghosts out #3 and vice-versa)

Any guidance on resolving this issue would be much appreciated!

bump, highly interested in outcome

Have you solved yet?

@tuanphan -- No solution yet; working on other aspects of the site currently and will swing back around to this when I have a chance.