title: Adding image over another image - bootstrap
body: <p>I want to add an image over an image.</p>
  
  <p>For example, there's an image in the background and on top of that i need to add an image of a <code>play button</code>. Where the user can play the video by clicking on it. This is also shown on the <code>Shopify</code> homepage.</p>
  
  <pre><code>&lt;!-- Wrapper for slides --&gt;
          &lt;div class="carousel-inner"&gt;
              &lt;div class="item active"&gt;
  
                      &lt;img width='100%' 
                          src='http://roomista.com/uploads/hotel-gal/250_SunwayHotelHanoiSuperiorRoom.jpg' /&gt;
                  &lt;div class='img-container'&gt;
                      &lt;div class='img-text'&gt;
                          &lt;img src="http://lizkhoo.com/content/play-icon.png" alt="..." /&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS is as follows:</p>
  
  <pre><code>.img-container {
      width: 100%;
      position: relative;
      display: inline-block;
      margin: 10px 5px 5px;
  }
  
  .img-text {
      width: 100%;
      display: block;
  }
  </code></pre>