Place text on image when hovering

I want when hovering these images to appear some text directly on image.

        <div class="bottomContainer text-center" id="parent">
            <p class="bottomText" style="">Items that might be in this <b>Container</b>: </p>
            <div class="box row row-cols-3">
                <img id="bottomBox" class="bottomBox col" src="assets/box1.png" title="Test">
                <img id="bottomBox" class="bottomBox col" src="assets/box1.png">
                <img id="bottomBox" class="bottomBox col" src="assets/box1.png">
                <img id="bottomBox" class="bottomBox col" src="assets/box1.png">
                <img id="bottomBox" class="bottomBox col" src="assets/box1.png">
                <img id="bottomBox" class="bottomBox col" src="assets/box1.png">
                <img id="bottomBox" class="bottomBox col" src="assets/box1.png">
                <img id="bottomBox" class="bottomBox col" src="assets/box1.png">
                <img id="bottomBox" class="bottomBox col" src="assets/box1.png">
            </div>
        </div>