bootstrap 4 beta carousel dark overlay

Question

I'm making use of the carousel control of bootstrap v4.0.0-beta but I can't seem to get a dark transparent overlay over the images to create a nice contrast between the image a and the text.

Anyway have any ideas.

I've tried wrapper div classed for example:

.dark-overlay{
  background-color: rgba(0,0,0,0.7);
  position: absolute;
  top:0;
  left:0;
  width:100%;
  min-height: 250px;
}

And then with the above-mentioned class wrap the image tags with:

<div class="dark-overlay">
  <img class="first-slide" src="#" alt="First slide">
</div>

I saw some solutions where the image is set as a background onto the slide, but I want to keep the carousel dynamic as I want to swop images out. Thus setting it as a background image is maybe not the best solution.

Any help on how this can be solved would be appreciated.

Answer 1

Just found a solution now.

This is the original control copied from the documentation:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

Simply add the following to your stylesheet:

.carousel-item:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:rgba(0,0,0,0.7);
}

Hope this helps