Putting Text Over an Image in Multi-Item-Carousel in Bootstrap 3-Twitter bootstrap

// Instantiate the Bootstrap carousel
$('.multi-item-carousel').carousel({
    interval: false
});
  
  // for every slide in carousel, copy the next slide's item in the slide.
  // Do the same for the next, next item.
$('.multi-item-carousel .item').each(function () {
    var next = $(this).next();
    if (!next.length) {
        next = $(this).siblings(':first');
    }   
    next.children(':first-child').clone().appendTo($(this));

    if (next.next().length > 0) {
        next.next().children(':first-child').clone().appendTo($(this));
    } else {
        $(this).siblings(':first').children(':first-child').clone().appendTo($(this));
    }
});

.multi-item-carousel {
    width: 850px;
    height: 150px;
    font-size: 25px;
}

.multi-item-carousel .carousel-inner > .item {
    transition: 500ms ease-in-out left;
}

.multi-item-carousel .carousel-inner .active.left {
    left: -33%;
}

.multi-item-carousel .carousel-inner .active.right {
    left: 33%;
}

.multi-item-carousel .carousel-inner .next {
    left: 33%;
}

.multi-item-carousel .carousel-inner .prev {
    left: -33%;
}

@media all and (transform-3d), (-webkit-transform-3d) {
    .multi-item-carousel .carousel-inner > .item {
        transition: 500ms ease-in-out left;
        transition: 500ms ease-in-out all;
        backface-visibility: visible;
        transform: none!important;
    }
}

.multi-item-carousel .carousel-control.left,
.multi-item-carousel .carousel-control.right {
    width: 5%;
    background-image: none!important;
    filter: none!important;
    outline: none!important;
    border: 0;
}

.container {
    width: 100%;
}

.carousel {
    padding: 20px 70px;
}

.image {
    border: 0;
    outline: none;
    background: transparent;
}

.image-content {
    top: 5px;
    left: 21px;
    position: absolute;
    color: rgb(225, 225, 225);
    font-size: 11px;
}

body {
    background-color: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="carousel slide multi-item-carousel" id="theCarousel">
                        <div class="carousel-inner">
                            <div class="item active">
                                <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive"></a>
                                  <div class="image-content">Streamer</div>
                                </div>  
                            </div>

                            <div class="item">
                                <div class="col-xs-4"><a href="#2"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive"></a>
                                  <div class="image-content">Streamer</div>
                                </div>    
                            </div>

                            <div class="item">
                                <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/200x110/f44336/000000" class="image img-thumbnail img-responsive"></a></div>
                            </div>

                            <div class="item">
                                <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/200x110/673ab7/000000" class="image img-thumbnail img-responsive"></a></div>
                            </div>

                            <div class="item">
                                <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/200x110/4caf50/000000" class="image img-thumbnail img-responsive"></a></div>
                            </div>

                            <div class="item">
                                <div class="col-xs-4"><a href="#1"><img src="http://placehold.it/200x110/8bc34a/000000" class="image img-thumbnail img-responsive"></a></div>
                            </div>
                        </div>
                        <a class="left carousel-control" href="#theCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                        <a class="right carousel-control" href="#theCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
                    </div>
                </div>
            </div>
        </div>