How to show text on image upon hover

Site URL: https://gopher-oboe-gfg8.squarespace.com/about

Hello, 

Here's my website. I have the "team" page in the About Us page: https://gopher-oboe-gfg8.squarespace.com/about password: flutes

May I ask for a code that makes it show text and makes the image slightly darker upon hovering? Just like in this site as inspiration/peg: https://www.cletile.com/pages/meet-our-team

Thank you

You can use Gallery Section Grid with this CSS code to achieve effect

figure.gallery-grid-item {
    position: relative;
}
.gallery-caption {
    position: static;
}
/* title */
figcaption.gallery-caption .gallery-caption-wrapper p.gallery-caption-content {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    padding: 7%;
    transition: opacity ease 200ms !important;
    opacity: 0 !important;
pointer-events: none;
}
.gallery-grid-item:hover .gallery-caption-wrapper p.gallery-caption-content {
    opacity: 1 !important;
}
/* overlay */
.gallery-grid-item-wrapper a:after {
    background: #f4f6ea; /* overlay color */
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity ease 200ms !important;
}
.gallery-grid-item:hover .gallery-grid-item-wrapper a:after {
    opacity: 0.75;
}
/* remove gap */
figcaption {
    padding: 0 !important;
}

To make The team text appears next to Gallery Grid, you can follow this