Image hover state

Hello,

Does anyone know how to style text that appears when hover over an image? Using foster template and all I can get is a black strip at the base of the image. Ideally like a white box that sits centred (image attached) with the project name in the box.

Website still a work in progress, link here: https://www.franklyinteriordesign.com.au/

Thanks!

@iamaem Can you share link to "image"?

Don't have a link to the image, but have link to the site section and you can hover and see: https://www.franklyinteriordesign.com.au/projects

19 minutes ago, iamaem said:

Don't have a link to the image, but have link to the site section and you can hover and see: https://www.franklyinteriordesign.com.au/projects

Add to Home > Design > Custom CSS

body#collection-5daf4aa89984f330a48a177e .image-caption-wrapper {
    background: #fff;
    text-align: center;
}

Thanks @tuanphan!! Is there a way to have it sit in the centre of the image and watermarked so you can see through the image, just like the example I attached? 

4 minutes ago, iamaem said:

Thanks @tuanphan!! Is there a way to have it sit in the centre of the image and watermarked so you can see through the image, just like the example I attached? 

you can change $fff to background: rgba(255,255,255,0.2);

vertical center?

Yes vertical centre, how would I do this? Thank yo for all your help, much appreciated

46 minutes ago, iamaem said:

Yes vertical centre, how would I do this? Thank yo for all your help, much appreciated

body#collection-5daf4aa89984f330a48a177e .image-caption-wrapper {
    background: rgba(255,255,255,.9);
    text-align: center;
    transform: translateY(-150%);
}

Thanks Tuanphan!