Hover effects with text for Gallery on a 7.0 page

I would like text to appear on a slightly transparent background when you hover over each image in the gallery on my homepage.
nickstan.com
I have managed to get the white transparency to appear on hover, but that is as far as I could get.
The attached images are how I would ideally like it to look when you hover over it.
Is this something I do with a second image, and just have the hover change to the image version with the overlay, or is this something I do with the text description or title? Each image has a click through link and this is a 7.0 page.
Thank you!
 

You mean hover >> change to another image, or make text appear?

15 hours ago, tuanphan said:

You mean hover >> change to another image, or make text appear?

Whichever is easiest, and preserves the click through links. If i can get the hover effect to make the text appear and the text looks like the images i have attached, that would be great, but if it will be too difficult to get the text to appear in that way, then I will need to change to the new image.

On 10/26/2023 at 7:19 PM, tuanphan said:

You mean hover >> change to another image, or make text appear?

is it possible? to change to another image on hover?

Add to Custom CSS, the code for first two images

.slide [href="/come-say-gday"]:hover img {
    content: url(https://cdn.pixabay.com/photo/2023/09/22/07/02/red-8268266_1280.jpg);
}

.slide:hover [href="/rebel-new-season-fashion"] img {
    content: url(https://cdn.pixabay.com/photo/2023/10/18/18/59/tomatoes-8324940_1280.jpg);
}