title: Placing text in the center-bottom of a div with overlay and image
body: <p>I am trying to place some text in the center-bottom of a div which contains an overlay and image. </p>
  
  <p>But how can i achieve this?</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row team-images"&gt;
          &lt;div class="col-sm-3"&gt;
              &lt;div class="team-item"&gt;
                  &lt;div class="team-image-overlay"&gt;&lt;/div&gt;
                  &lt;img src="http://placehold.it/400x400" class="img-responsive" alt="" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-3"&gt;
              &lt;div class="team-item"&gt;
                  &lt;div class="team-image-overlay"&gt;&lt;/div&gt;
                  &lt;img src="http://placehold.it/400x400" class="img-responsive" alt="" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-3"&gt;
              &lt;div class="team-item"&gt;
                  &lt;div class="team-image-overlay"&gt;&lt;/div&gt;
                  &lt;img src="http://placehold.it/400x400" class="img-responsive" alt="" /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS code:</p>
  
  <pre><code>.team-images .team-item {
      position: relative;
  }
  .team-images img {
      width: 100%;
      height: 100%;
      margin: 0 0 15px;
  }
  .team-images .team-image-overlay {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(41, 128, 185, 0.4);
      color: #fff;
      -webkit-transition: all ease .5s;
      -moz-transition: all ease .5s;
      transition: all ease .5s;
  }
  .team-images .team-image-overlay:hover {
      background: rgba(24, 188, 156, 0);
  }
  </code></pre>
  
  <p>Here is a complete example of whats created so far: <a href="https://jsfiddle.net/prp794Lb/1/" rel="nofollow">https://jsfiddle.net/prp794Lb/1/</a></p>