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>