This effect works by placing a text module directly over the image module using absolute positioning. This does means for each new row of images you want, you will need a new Divi row within the section.

In order for this to display properly on all screen sizes, just make sure you have the following applied to the image module settings

The background gradient can be edited in the Text module background settings in the content tab.

In the layout, I have made the text a link, so it appears the whole image is linked. You do not need to have a link and can just use text if you wish. As links are styled globally in the theme customiser the text will be whatever colour you have chosen there.  The following section of CSS overrides the customiser settings for the link just for this effect. If you do not want to use links you can remove or just ignore this section.

/*Text link colour*/

.ds-advent-6-text-hide a {
    color: #fff;
}

The HTML in the text module looks like this:

<a href="#">The Blue <mark>Lagoon</mark></a>

If you are using links you will need to replace the # with your link URL.

The <mark> tags allow you to style just certain text. Here is the CSS that styles this text:

/*Bold text*/

.ds-advent-6-text-hide mark {
    display: block;
    background: transparent;
    font-weight: bold;
    color: #fff;
}

If you do not want certain text styled, just remove the <mark> tags. You can change this CSS to style the text any way you wish, just as you would with regular text, but you MUST keep the background set to transparent or set your own colour as otherwise, the browser will make the background yellow.

You may change the speed of the transition speed by editing the .7s value in the transition property in this section of CSS:

/*Postion the text module and centrally align text*/

.ds-advent-6-text-hide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all .7s ease;
    transition: all .7s ease;
    opacity: 1;
}