Bring carousel caption on top of the overlay

Question

I have this Bootstrap carousel:

HTML:

<div id="carousel-example" class="carousel slide" data-ride="carousel">
  <div class="carousel-overlay"></div>

  <ol class="carousel-indicators">
    <li data-target="#carousel-example" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example" data-slide-to="1"></li>
    <li data-target="#carousel-example" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="item active">
      <a href="#"><img src="http://placekitten.com/1600/600" /></a>
      <div class="carousel-caption">
        <h3>Meow</h3>
        <p>Just Kitten Around</p>
      </div>
    </div>
    <div class="item">
      <a href="#"><img src="http://placekitten.com/1600/600" /></a>
      <div class="carousel-caption">
        <h3>Meow</h3>
        <p>Just Kitten Around</p>
      </div>
    </div>
    <div class="item">
      <a href="#"><img src="http://placekitten.com/1600/600" /></a>
      <div class="carousel-caption">
        <h3>Meow</h3>
        <p>Just Kitten Around</p>
      </div>
    </div>
  </div>

  <a class="left carousel-control" href="#carousel-example" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>

CSS:

.carousel-overlay{
    background-color: black;
    width: 100%;
    opacity: 0.3;
    height: 100%;
    position: absolute;
    z-index: 15;
}

I want the caption and arrow buttons to be on the top the overlay like the carousel indicators. I tried using z-index, but it is not working.

here's a fiddle: http://jsfiddle.net/bM32G/39/

score 0 · Accepted Answer · answered Jul 11 '16 at 09:11

0

I put the captions and arrow buttons on top of the overlay with z-index in this Fiddle:

http://jsfiddle.net/1xu2fpc8/

I used some !important for simplicity, but it seems to work for me.

answered Jul 11 '16 at 09:11

Maharkus

2,841
21
35

Like i said z-index is not working for me. Nothing happens – user63762453 Jul 11 '16 at 09:29
Did you take a look at the jsfiddle I linked? I don't know if I'm misunderstanding you, but in the jsfiddle all the elements you wanted above the overlay are above the overlay. – Maharkus Jul 11 '16 at 09:32
Yeah i looked at it and That's what I need. But it's not working for me :( – user63762453 Jul 11 '16 at 09:32
Hmm alright. Is it possible for you to put the CSS you added to the slider in your JSFiddle, so I can see what else styling there is that might interfere with z-index? – Maharkus Jul 11 '16 at 09:34

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

To change the color of the content of the carousel you need to refer to, in this case, img. Add the following code to your CSS:

img{
 -webkit-filter: sepia(90%) hue-rotate(90deg);
}

Remove or comment out the following line in your HTML:

<div class="carousel-overlay"></div>

You can also look into the following posts:

edited May 23 '17 at 12:14

Community

1
1

answered Jul 11 '16 at 09:26

Alex Ljamin

737
8
31

If I remove z-index, the overlay is not visible at all. – user63762453 Jul 11 '16 at 09:29
@Nivedita I've updated my answer, please have a look and let me know if this works for you. – Alex Ljamin Jul 11 '16 at 10:59

score 0 · Answer 3 · answered Jul 11 '16 at 11:50

0

Since z-index is not working for you..

Try this

.item a img {
  opacity: 0.6;
}

.carousel-control {
  opacity: 1;
}

.item .carousel-caption {
  opacity: 1;
}

FIDDLE

answered Jul 11 '16 at 11:50

Deepu Sasidharan

5,193
10
40
97

Bring carousel caption on top of the overlay

3 Answers3