title: Bootstrap Carousel Opacity Images and Text
body: <p>I am trying to use the Bootstrap Carousel to have background-images at a low opacity with header text at full capacity. I am trying to find out a way to target each slider image without bringing down the text opacity. </p>
  
  <pre><code>  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;!-- Carousel --&gt;
          &lt;div id="carousel-example-generic" class="carousel slide" data-      ride="carousel"&gt;
        &lt;!-- Indicators --&gt;
                  &lt;ol class="carousel-indicators"&gt;
                      &lt;li data-target="#carousel-example-generic" data-slide-to="0" class="active"&gt;&lt;/li&gt;
    &lt;li data-target="#carousel-example-generic" data-slide-to="1"&gt;&lt;/li&gt;
      &lt;li data-target="#carousel-example-generic" data-slide-to="2"&gt;&lt;/li&gt;
  
  
  
  
                  &lt;li data-target="#carousel-example-generic" data-slide-to="3"&gt;&lt;/li&gt;
                  &lt;li data-target="#carousel-example-generic" data-slide-to="4"&gt;&lt;/li&gt;
              &lt;/ol&gt;
              &lt;!-- Wrapper for slides --&gt;
              &lt;div class="carousel-inner"&gt;
  
              &lt;div class="item active"&gt;
              &lt;div class="background"&gt;
           &lt;img src="img/DSC00154.jpg" alt="first slide" /&gt;
                  &lt;/div&gt;
                  &lt;!-- Static Header --&gt;
                  &lt;div class="header-text hidden-xs"&gt;
                      &lt;div class="col-md-12 text-center"&gt;
                          &lt;h2&gt;&lt;span&gt;Leadership&lt;/span&gt;&lt;/h2&gt;
                          &lt;br&gt;
                   &lt;/div&gt;
                  &lt;/div&gt;&lt;!-- /header-text --&gt;
              &lt;/div&gt;
  
              &lt;div class="item transbox"&gt;
                  &lt;img src="img/DSC01961.jpg" alt="Second slide"&gt;
                  &lt;!-- Static Header --&gt;
                  &lt;div class="header-text hidden-xs"&gt;
                      &lt;div class="col-md-12 text-center"&gt;
                          &lt;h2&gt;
                              &lt;span&gt;Mentorship&lt;/span&gt;
                          &lt;/h2&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;&lt;!-- /header-text --&gt;
              &lt;/div&gt;&lt;!--item div--&gt;
  
              &lt;div class="item"&gt;
                  &lt;img src="img/DSC02637.jpg" alt="Third slide"&gt;
                  &lt;!-- Static Header --&gt;
              &lt;div class="header-text hidden-xs"&gt;
                      &lt;div class="col-md-12 text-center"&gt;
                          &lt;h2&gt;
                              &lt;span&gt;Wisdom&lt;/span&gt;
                          &lt;/h2&gt;
                          &lt;br&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;&lt;!-- /header-text --&gt;
              &lt;/div&gt;&lt;!--item div--&gt;
  
               &lt;div class="item"&gt;
               &lt;img src="img/DSC00130.jpg" alt="fourth slide"&gt;
  
                   &lt;div class="header-text hidden-xs"&gt;
                      &lt;div class="col-md-12 text-center"&gt;
                          &lt;h2&gt;
                              &lt;span&gt;Community Outreach&lt;/span&gt;
                          &lt;/h2&gt;
                          &lt;br&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;&lt;!-- /header-text --&gt;
              &lt;/div&gt;&lt;!--item div--&gt;
          &lt;/div&gt;
          &lt;!-- Controls --&gt;
  
  
      &lt;/div&gt;&lt;!-- /carousel --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>div.background {
  background-image:url(../img/DSC00154.jpg);
  border: 2px solid black;
  }
  
  div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */
  }
  
  div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
  }
  </code></pre>
  
  <p>Hope there is a way to target this directly without breaking the carousel plugin. </p>