title: Div over image Bootstrap 3
body: <p>Snippet based on <a href="http://jsfiddle.net/evJRm/" rel="nofollow noreferrer">http://jsfiddle.net/evJRm/</a> (<a href="https://stackoverflow.com/questions/4306801/hover-image-display-div-over-it">Hover image - display div over it</a>)</p>
  
  <p>The problem is, when the window resizes, the text and the image get seperated from each other (the image starts on a new line). How do I fix this?</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class='img-container'&gt;
          &lt;div class='img-text'&gt;text&lt;/div&gt;
          &lt;img style='margin-top:10px;' width='150' height='225' src='http://img14.imageshack.us/img14/9698/29588166.jpg' /&gt;
      &lt;/div&gt;
      &lt;div class='img-container'&gt;
          &lt;div class='img-text'&gt;text&lt;/div&gt;
          &lt;img style='margin-top:10px;' width='150' height='225' src='http://img14.imageshack.us/img14/9698/29588166.jpg' /&gt;
      &lt;/div&gt;
      &lt;div class='img-container'&gt;
          &lt;div class='img-text'&gt;text&lt;/div&gt;
          &lt;img style='margin-top:10px;' width='150' height='225' src='http://img14.imageshack.us/img14/9698/29588166.jpg' /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  .img-container{
      width:150px;
      height:225px;
      position: relative;
      display: inline;
      margin:5px;
  }
  .img-text{
      top:20px;
      width:150px;
      height:50px;
      margin-left:15px;
      position: absolute;
      background-color: yellow;
      display:block;
  }
  </code></pre>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/w23ch/" rel="nofollow noreferrer">http://jsfiddle.net/w23ch/</a></p>