Search code examples
javascripthtmlcsscarouselindicator

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.

enter image description here

enter image description here

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/

Solution

  • For some reason your ol.carousel-indicators extends to the whole available height hence covering your images (just not a small part to the left).

    Try adding something like

    .carousel-indicators{
    height:20px;
}

    I am positive it fixes your issue in the fiddle you provided.

    As an extra piece of advice, Firefox got a real cool Firebug extension where you can inspect and see the dimensions for every HTML element in your page. I think there is something similar in Chrome too. Hope this helps.

    EDIT In 2 places in the Bootstrap CSS is a border-bottom directive for your carousel-indicators that make it stretch all the way down. It's cleaner to just remove them I guess.