How to add image caption VIA coding

Site URL: http://hilarybeckwith.com/main-page

Hello - Is there a way to add an image caption in the Stacked layout via code? I am trying to customize caption text to be as a centered overlay over an image, and I think I found coding for that. But I need to know how to add the actual text. 

Can I add HTML code to the Custom CSS window?  I'm afraid to mess it up!

I've attached a screenshot for reference - I would like to add the one-word text that is currently immediately below each image, to the center of the image instead, and change the stylings (which I think I can figure out).

Add to Design > Custom CSS

/* List items-Text over image */
[data-section-id="612ee2e62200bd4633622d9b"] {
li:nth-child(1) .list-item-media-inner:after {
    content: "DISCOVER";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    z-index: 9999;
    text-align: center;
    color: white;
}
li:nth-child(2) .list-item-media-inner:after {
    content: "GET GROUNDED";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    z-index: 9999;
    text-align: center;
    color: white;
}
li:nth-child(3) .list-item-media-inner:after {
    content: "STAY ROOTED";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    z-index: 9999;
    text-align: center;
    color: white;
}
.list-item-media-inner:after {
    font-family: jubilat !important;
}
}