html Image Title only working on mouse over the sides

I have a weird error where in one of my pages the Title (or caption) attribute in a picture inside a carousel only appears on the sides.

I have noticed that it may have some relation with the indicators or slide or carousel(from bootstrap), because in the area that the title is not shown, the indicators are normal, and in the area where the indicators are a little fade out, the title works.

I attached some pictures to show the fade in the indicators and where the mouse was (yep that shitty blue painting is more less where the mouse was). The yellow area is where the title works.

Here is the code for that:

<div class = box style = "margin: 0">
        <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="10000">
            <!-- Indicators -->
            <ol class="carousel-indicators carousel-control" >
                <li data-target="#myCarousel" data-slide-to="0" title="New Location: 12/03/2014" class="active" ></li>
                <li data-target="#myCarousel" data-slide-to="1" title="Bake Sale Success: 21/07/2015"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">

                <div class="item active">
                    <h2 class="featurette-heading subHeadingText">New Location</h2>
                    <img class="img-responsive center-block" src="../images/Reading%20School.jpg"
                         style="width: 70%; height: 70%;" title="Reading School, new location">

                </div>
<!-- Second slide would come here-->

            </div>
        </div>
    </div>

The question is simple (the answer maybe not xD) How do I make the title to appear when the mouse is over the whole picture?

EDIT: as sujested here is a JSfiddle example http://jsfiddle.net/r2wLz6xr/16/