Title (or whatever)

Lagoon Nebula
Big Bud
Lagoon Nebula, Semi-transparent
Lagoon Nebula
Buddy, a rat terrier
Big Bud

Any other message you want down here, or it could be above the photos if you wish or above and below if you prefer.

Adding the statement style= "display: none;" to either figcaption will hide the caption.

Below is the HTML to generate this page as shown above. Values assigned to margins, dimensions, borders, colors, are arbitrary.

<!DOCTYPE html>

<html>

<head>

<style>

content {margin-left: auto; margin-right: auto; margin-top: 40px; margin-bottom: 10px; display:block; width: 60%; height: 100%; border: none; padding:10px;
}

h1 {text-align: center;}

.holder { display: flex; flex-wrap: nowrap; background-color: transparent;
}

.holder > div { width: 50%; margin: 0; text-align: center; line-height: 35px; font-size: 30px; border: none;
}

figure { padding: 10px; margin: auto;
}

figcaption { background-color: transparent; color: red; font-size: 2em; line-height: 1em; margin-top: -200px; text-align: center;
}

</style>

</head>

<body>

<content>

<h1>Title (or whatever)</h1>

<div class="holder">

<div><b>Lagoon Nebula</b></div>

<div><b>Big Bud</b></div>

</div>

<div class="holder">

<div style= "height: 450px;">

<figure>

<img src="LagoonNewHST5.jpg" alt="Lagoon Nebula, Semi-transparent" style="width:100%">

<figcaption>Lagoon Nebula</figcaption>

</figure>

</div>

<div>

<figure>

<img src="Buddy1.jpg" alt="Buddy, a rat terrier" style="width:100%">

<figcaption style= "margin-top: 0;">Big Bud</figcaption>

</figure>

</div> &

#60/div>

<div>

<p>Any other message you want down here, or it could be above the photos if you wish or above and below if you prefer.

<p> Adding the statement <i>style= "display: none;"</i> to either figcaption will hide the caption.

</div>

</content>

</body>

</html>