title: Rounded Corner Div with Image and Text
body: <p>I am trying to create a div that has rounded corners that contains a div and text. I am having problems trying to get my rounded corners to show as it seems the <code>overflow:hidden;</code> is not working.</p>
  
  <p>I was reading this <a href="https://stackoverflow.com/a/6528918">post</a> that explained that both the image and parent div needs <code>position:static;</code> but once I do that .text does not appear above the image.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="span8 cell"&gt;
      &lt;img src="http://www.placehold.it/400x200"&gt;    
      &lt;div class="text"&gt;text&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.cell {
      width: 400px;
      height: 100%;
      overflow: hidden;
      border-top-left-radius:5px 5px;
      border-top-right-radius:5px 5px;
      border-bottom-left-radius:5px 5px;
      border-bottom-right-radius:5px 5px;
      -moz-box-shadow: 0 1px 3px #000;
      -webkit-box-shadow: 0 1px 3px #000;
      box-shadow: 0 1px 3px #000;
      background: #e5e5e5;
      position: relative;
      margin: 30px;
  }
  
  .cell img { position: static; }
  
  .cell .text{
      height: 100%;
      color: #fff;
      font-weight: bold;
      position: absolute;
      top: 0;
      box-sizing:border-box;
      -moz-box-sizing:border-box;
      -webkit-box-sizing:border-box;
      padding: 20px;
      text-align: left;
  }?
  </code></pre>