html Immagine Titolo funziona solo con il mouse sui lati

Question

Ho uno strano errore in cui in una delle mie pagine l'attributo Titolo (o didascalia) in un'immagine all'interno di un carosello appare solo sui lati.

Ho notato che potrebbe avere qualche relazione con gli indicatori o la diapositiva o il carosello (da bootstrap), perché nell'area in cui il titolo non viene mostrato, gli indicatori sono normali, e nell'area in cui gli indicatori sono un poco svanire, il titolo funziona.

Ho allegato alcune immagini per mostrare la dissolvenza negli indicatori e il punto in cui si trovava il mouse (sì che la pittura blu di merda è meno dove era il mouse). L'area gialla è dove il titolo funziona.

ecco il codice per questo:

<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> 

La domanda è semplice (la risposta forse non xD) Come faccio a fare il titolo a comparire quando il mouse è finito l'intero quadro?

EDIT: come sujested ecco un esempio JSfiddle http://jsfiddle.net/r2wLz6xr/16/

Answer 1

Per qualche motivo l'ol.carousel-indicators estende per tutta l'altezza disponibile quindi coprendo le immagini (non solo una piccola parte di sinistra).

Prova ad aggiungere qualcosa di simile

.carousel-indicators{ 
    height:20px; 
} 

Io sono positivo che risolve il problema nel fiddle you provided.

Come ulteriore consiglio, Firefox ha una vera e propria estensione Firebug in cui è possibile ispezionare e visualizzare le dimensioni per ogni elemento HTML nella pagina. Penso che ci sia qualcosa di simile anche in Chrome. Spero che questo ti aiuti.

EDIT In 2 posti nel Bootstrap CSS è una direttiva border-bottom per il vostro carousel-indicators che lo rendono allungare fino in fondo. È più semplice rimuoverli, credo.