Put a Div over Bootstrap 3 Carousel

Question

I am trying to put a div over the carousel.

here is the code

<div id="join" style="z-index:5;">
    <div class="image-join" style="z-index:10;">
        <div class="join-text">Join the revolution</div>
    </div>              
</div>

and the css

.item{
    height:354px;
    width:100;
}

#join{
    position: absolute;
    top: 0px;
    background-color:rgba(0,0,0,0);
    width: 100%;
}

.image-join{
    margin-left:200px;
    width:50px;
    height: 354px;
    background-color:rgba(194,194,194,.4);
    border: 1px solid rgba(245, 0, 0, 1);
    border-radius: 12px;
}

.join-text{
    color:rgba(255,255,255,.9);
}

The problem I am facing is that I am not able to put the div and make the controls of the carousel (arrows and dots) work, because the div that wraps the div that goes over the carousel is absolute positioned.

here is my fiddle

http://jsfiddle.net/agusgambina/7WCnT/2/

Thank you

Answer 1

Just add below code in you CSS

.carousel-control.left {
    z-index:7
}  
.carousel-control.right {
    z-index:7
}