Text over Image on Hover

Site URL: https://potato-sphere-g3k8.squarespace.com/about

Hi! Does anyone know how to create a hover effect where as you click on each one of these images, there is text that appears (the text for each image is in the green pic).  I found a bunch of examples of codes on this site but not sure if I need to edit them at all for our images? http://css-workshop.com/hover-box-text-over-images-on-hover-and-more/ Thanks!! @tuanphan

Wesbite: naonow.com Password: naonow

These images are on our About page (https://potato-sphere-g3k8.squarespace.com/config/ or https://naonow.com/about)

You can use this effect (Image Block)

Just copy & paste code ✌️

Thank you so much!! @tuanphan

I was able to add the text on top of those images but was wondering if there's a way to:

1) Make the black box with text fill up entire image box like in that example with the text in the center 

2) Make the box lighter black in color

3) Add a cool effect like sliding up

Thank you!!! This is on our about page: 

https://naonow.com/about password: naonow

https://potato-sphere-g3k8.squarespace.com/config/

edit .6 in this code (you can use 0 to 1, eg: 0.75)

background: rgba(4,90,196,.6) !important;

and remove max-height: 75%

Tried that! Don't see any changes! @tuanphan Where is the place to delete 75%?

12 hours ago, rachelt said:

Tried that! Don't see any changes! @tuanphan Where is the place to delete 75%?

 

.image-block figcaption.image-caption-wrapper {
    background-color: rgba(4,90,96,0.95) !important;
    max-height: unset !important;
}

Thank you!!! Now the boxes are too big... is there a way to make them the EXACT size of the images? @tuanphan And how do I make them a slightly lighter black?

8 hours ago, rachelt said:

Thank you!!! Now the boxes are too big... is there a way to make them the EXACT size of the images? @tuanphan And how do I make them a slightly lighter black?

edit background in above code

.image-block figcaption.image-caption-wrapper {
    background-color: rgba(4,90,96,.95) !important;
    max-height: unset !important;
    max-height: 100% !important;
}

Sorry-it's still not working for the top three images! Some have a scroll thing and others are too small! (see attached) I ended all the font so it can fit within the size of the image. I just want the box to perfectly cover the image with no scrolling! Is this possible?Thanks!! @tuanphan How do you also make it have this in mobile view? In mobile view it doesn't take up the whole image. 

your text is too long, so it will appear scrollbar.