Hovering captions in centre of image without cropping with dark overly

Site URL: https://www.timkentphotographer.com/

I'm struggling to add hover over captions with a dark background to the centre of my images. Have only managed to get them at the bottom of the image. When changing the amounts to move it further up the image to the centre it crops the photo. This is on  a simple gallery. 

I have attached an example of what mine looks like and what I'd 'd like it to look like.

Current code I''m using is below:  

.gallery-caption p{text-align:center} 

.gallery-caption p{font-size:0.8rem!important}

.gallery-caption p{font-family:pragmatica-extended!important}

.gallery-caption {margin-top: -15%} 

.gallery-caption {opacity:0!important}

.gallery-grid-item:hover 

.gallery-caption {opacity:1!important; transition-duration:0s}

.gallery-grid-item {opacity: 1;filter: alpha(opacity=40);}

img:hover {opacity: 0.4;filter: alpha(opacity=100)}

Hey @Caz1570048375 it looks like your gallery isn't displaying any of the metadata at the moment so it won't be possible for the text to appear. Did you make some changes to the gallery recently?

Hi Ryan,

I've had to remove the code display purposes for now.

Can you edit Section > enable caption first? We can check easier

On 1/11/2021 at 11:39 PM, Caz1570048375 said:

Hi Ryan,

I've had to remove the code display purposes for now.

 

15 hours ago, tuanphan said:

Can you edit Section > enable caption first? We can check easier

 

I have done this now

On 1/14/2021 at 3:07 AM, Caz1570048375 said:

I have done this now

We don't see caption here. Have you enabled caption + add some demo captions yet?