changing the size of the hover box for a particular section

Site URL: https://peoplefirst1.squarespace.com

Hi, i've used the following code ( from heart and dash's code) to change the background colour and text colour and it works, but i'm unable to figure out how to change the box size. I want the box to cover the entire image only for one particular section. 

Thank  you.

#page-section-610bebb9de02d80e5889b075
.image-caption p {
 font-size: 18px !important;
 font-weight: semibold !important;
 color: #ffffff !important;
 text-transform: uppercase; 
 line-height: 120% !important;
 letter-spacing: 2px !important;
 opacity: 1 !important;
}

#page-section-610bebb9de02d80e5889b075
.image-caption-wrapper {
  background: #0059b3 !important;
  opacity: 1 !important;
}

Can you share link to page where you added above text?

Hi Tuan,

This is the page.

https://peoplefirst1.squarespace.com/who-we-are

On 9/9/2021 at 10:24 AM, Namrata said:

Hi Tuan,

This is the page.

https://peoplefirst1.squarespace.com/who-we-are

Hi. Use this code

#page-section-610bebb9de02d80e5889b075 .image-caption-wrapper {
    max-height: unset !important;
    height: 100% !important;
}

Great! it works. Thanks a ton. 

 How can i make the text centre aligned and to the middle? Right now it's left aligned. When there is a lot of text it looks fine, but when the text is just a one liner there is too much space.

Below is the full code.

#page-section-610bebb9de02d80e5889b075
.image-caption p {
 font-size: 18px !important;
 font-weight: semibold !important;
 color: #ffffff !important;
 text-transform: uppercase; 
 line-height: 120% !important;
 letter-spacing: 2px !important;
 opacity: 1 !important;
}

#page-section-610bebb9de02d80e5889b075
.image-caption-wrapper {
  background: #0059b3 !important;
  opacity: 1 !important;
   max-height: unset !important;
   height: 100% !important;
}

use this

#page-section-610bebb9de02d80e5889b075 .image-caption p {
    font-size: 18px !important;
    color: #fff !important;
    text-transform: uppercase;
    line-height: 120% !important;
    letter-spacing: 2px !important;
    opacity: 1 !important;
    text-align: center;
}

also, font-weight: semibold doesn't exist, so I removed from the code

Thank you so much Tuan! You have been an awesome help!