Html Image Title only works on the mouse around

Question

I have a strange mistake when on one of my pages the Title (or caption) attribute on the picture inside the carousel appears only on the sides.

I noticed that this may have something to do with indicators or slides or carousels (from bootstrap), because in the area where the title is not displayed, the indicators are normal, and in the area where the indicators are slightly faded, the name works.

I attached a few shots to show the attenuation in the indicators and where the mouse was pointed (yes, this shitty blue picture is much smaller than a mouse). The yellow area is the name of the name.

Here is the code for this:

<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 may not be xD). How to make the caption appear when the mouse is over the whole image?

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

Answer 1

For some reason, your ol.carousel-indicators extends to the entire available height, therefore, covers your images (only a small part on the left).

Try adding something like

 .carousel-indicators{ height:20px; } 

I am sure that he fixed your problem in the violin that you provided .

As an additional recommendation, Firefox got a real cool Firebug extension where you can view and view the sizes for each HTML element on your page. I think there is something similar in Chrome. Hope this helps.

EDIT . In two places in Bootstrap CSS there is a border-bottom directive for your carousel-indicators , which makes it stretched. It's cleaner to just remove them, I think.