Wanting to move summary block text (in a video gallery) to 'over image' - requiring CSS code please!

My site uses the Montauk template, squarespace 7.0

I'd like to move the text for the summary block gallery (currently displaying below image) to over image.

Ideally i'd also like the image to show this information when hovering over each image, but that would just be nice to have if possible.  
 

any help much appreciated!

Here

/*Squareskills - Summay Block Hover Titles*/
//target page
#collection-5cbc83a4419202c35e7506e7 {

.summary-title {
    position: absolute;
    inset: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
	opacity: 1;	
	transition: opacity .3s ease; //adjust timing to your liking
	}
summary-item:hover .summary-title {
    opacity: 1;

	}
}

I included a transition to fade the text in/out to avoid jerkiness.

Note: To avoid this being site wide I've targeted only the page you would like.

You can alternatively target other pages via their collection ID or target specific summary blocks with their block ID.

thank you !

Ah... I have an issue..

when i inject this code, rather than clicking the image taking me to the lightbox player for that specific video, it takes me to the 'reel' i had created of my gallery of videos. I realise now that the text link has always done this. 

is there some code I can add that will create a link to the specific video's lightbox popup?

sorry!

i'm happy for it to be sitewide, or i did a copy and paste of the code and added the 'more commercials' page and it worked also, but i've switched it off as the linking wasn't quite right. (it's sort of only half right as it is..  (text link goes to the wrong page, and image clicking works.)