Change Opacity of Image (Poster) Title Background on Hover

Site URL: http://www.caitlinhutson.com

I have already copied a CSS to change opacity of the overlay on my posters when hovering. The code I used is the following: 

.image-overlay {opacity: 0;
transition: .3s ease;}
    .image-overlay:hover {
      opacity: 1}

It gives the effect of turning the whole block from my image to an opaque green, with the text showing in both.

However, when not-hovering, I added a background color to my Title Text to make it easier to read, and I would like that background to fade out as the opaque green fades in (since the text is very visible on the green without that extra coloring). I tried to use the same format as above but can't figure out what the item is called to make this change. I am looking to do it to all of my posters, so a code that applies to all would be awesome.

Add to Home > Design > Custom CSS

.design-layout-poster:hover p {
    background: rgb(105,119,85) !important;
    box-shadow: 0.25em 0 0 rgb(105,119,85), -0.25em 0 0 rgb(105,119,85) !important;
}