<div class="item active" style="background-image: url(img/banner/slide3.jpg);">
                    <div class="panel panel-default">
                        <div class="carousel-caption">
                            <div class="panel-body banner">
                                <h2 data-wow-duration="700ms" data-wow-delay="500ms" class="wow bounceInDown animated">
                                    Commuter Line Adertising!</h2>
                                <h4 data-wow-duration="1000ms" class="wow slideInLeft animated"><span
                                        class="color">Operator
                                        :</span> PT KAI Commuter Jabodetabek (kjb). 8 - 12
                                    Carriages Formation / Trains. Capacity Up To 80 - 110 Passengers Per Carrages. Total
                                    More Than 600 Carriages.</h4>
                                <p data-wow-duration="1000ms" class="wow slideInRight animated">Operating Hour : 04.05 -
                                    23.30*.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

css
.carousel-caption h2 {
  font-size: 62px;
  font-weight: 300;
  margin-bottom: 15px;
  color: #F8F8FF;
  filter: drop-shadow(.05em .05em #89C342);
  mix-blend-mode: difference;
  position: relative;
  z-index: 1;
}
.carousel-caption h4 {
  font-size: 25px;
  font-weight: 300;
  margin: 6px 0 20px;
  color: #F8F8FF;
  filter: drop-shadow(.05em .05em #89C342);
  mix-blend-mode: difference;
  position: relative;
  z-index: 1;
}

.carousel-caption p {
  font-size: 18px;
  font-weight: 300;
  color: #F8F8FF;
  filter: drop-shadow(.05em .05em #89C342);
  mix-blend-mode: difference;
  position: relative;
  z-index: 1;
}
.banner {
  background: #000000;
  opacity: 0.5;
}