title: How do I add a play button on top of Bootstrap's carousel?
body: <p>I'm using Bootstrap's carousel to do a slideshow in order to preview some of my videos.
  I want to add a play button on top of the slideshow with a opacity change on hover.  (The button would not be clickable because the <code>href</code> is on the slideshow picture.  It's just here to show my user that it's a player.)</p>
  
  <p>But I can't get my div to show the button on top of everything.  Here is my code:</p>
  
  <pre><code>&lt;div class="carousel slide"&gt;
     &lt;div class="carousel-inner"&gt;
        &lt;div class="item active"&gt;&lt;a href="popup_video1.htm"&gt;&lt;img src="thumbnail1.jpg" /&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class="item"&gt;&lt;a href="popup_video2.htm"&gt;&lt;img src="thumbnail2.jpg" /&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class="item"&gt;&lt;a href="popup_video3.htm"&gt;&lt;img src="thumbnail3.jpg" /&gt;&lt;/a&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;a class="carousel-control left" href=".carousel" data-slide="prev"&gt;&amp;nbsp;&lt;/a&gt;
     &lt;a class="carousel-control right" href=".carousel" data-slide="next"&gt;&amp;nbsp;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my CSS (it's using less but you get the idea):</p>
  
  <pre><code>.carousel {
  width: 292px;
  height: 163px;
  
    .playBtn {
      width: 292px;
      height: 163px;
      position: relative;
      opacity: 0.8;
      background-image: url('play_btn.png');
      background-position: center center;
      background-repeat: no-repeat;
      z-index: 999;
  
        &amp;:hover{
          opacity: 1;
        }
    }
  
    img {
      width: 100%;
      height: 100%;
    }
  
    a.carousel-control {
      margin-top: 0;
      top: 0;
      right: 0;
      background: none;
      border: 0;
      width: 60px;
      height: 163px;
  
      &amp;:hover.right {
        background-repeat: no-repeat;
        background-image: url('right_arrow.png');
      }
  
      &amp;:hover.left {
        background-repeat: no-repeat;
        background-image: url('left_arrow.png');
      }
    }
  }
  </code></pre>
  
  <p>(Note that my play button is not a play/pause for the slideshow.)</p>
  
  <p>Where do I put my <code>&lt;div class"playBtn"&gt;&lt;/div&gt;</code>?</p>