How do i add text under image?

HTML:

        <div id="aircraft" style="left: 32%">
            <h1>Airbus A220-300</h1>
            <h2><br>$5.00</h2>
            <figure>
                <img src="./images/a220.png" id="product_placeholder" alt="No image">
                <figcaption>whatever  whatever  whatever</figcaption>
            </figure>
            <a href="./Airbus A220.html">
                <div>
                  <button class="buy-now-button"><img src="shopping_bag.png" style="width: 25%; height: 25%; vertical-align:middle;">Buy now</button>
                </div>
            </a>           
        </div>

CSS:

#product_placeholder {
    width: 75%;
    border-radius: 5%;
    transition: opacity 1s ease-in-out;
}
#product_placeholder:hover {
    opacity: 0;
    transition: opacity 0.5s;
}
figcaption {
    color: white;
    font-style: italic;
    padding: 2px;
    text-align: center;
}

Current result: (image)