How to put text over images

Question

I have 3 images on my home page,I need text in top of each images,so how to add text over image

 <div class="container">
                <h2 class="section-title">
                    My clasess
                </h2>

                <div class="owl-carousel visit-carousel">
                    <div class="item">
                        <a href="#" ><img src="assets/images/1.jpeg" alt="visit-image" class="img-responsive visit-item"></a>
                    </div>
                    <div class="item">
                        <a href="#" ><img src="assets/images/2.jpeg" alt="visit-image" class="img-responsive visit-item"></a>
                    </div>
                    <div class="item">
                        <a href="#" ><img src="assets/images/3.jpeg" alt="visit-image" class="img-responsive visit-item"></a>
                    </div>

                </div>
            </div>

Answer 1

have the text inside of a div, and use the div as your image using css. background-image option, and inside the div insert your text.

Html

    <div class="image-box">
       <h2>Text Inside</h2>
    </div>

css

    .image-box {
       background-color: #ccc;
       height: 200px;
       width: 200px;
     }