title: Text over image in list
body: <p>I'm trying to put a text field inside list and over a image (<a href="http://store.picbg.net/pubpic/2D/E7/ef2988092f8f2de7.png" rel="nofollow">like this</a>)</p>
  
  <p>I manage to make it right on one list item, but when I add more all of the text fields stuck on the first image (<a href="http://store.picbg.net/pubpic/9E/54/370193726bd69e54.png" rel="nofollow">like this</a>)</p>
  
  <p>Here is my code :  </p>
  
  <p>HTML</p>
  
  <pre><code>         &lt;ul class="panel"&gt;
  
          &lt;li&gt;
  
          &lt;img src=""&gt;
  
              &lt;span class="text-field" class="clearfix"&gt;
  
              &lt;h2&gt;text&lt;/h2&gt;
  
               &lt;/span&gt;
  
          &lt;/li&gt; 
            &lt;/ul&gt; 
  </code></pre>
  
  <p>CSS </p>
  
  <pre><code>          .panel li {display: inline-block; padding-right: 10px;}
            .panel li img{width: 100%;}
            .text-field {position: absolute; top: 212px; left: 0; width: 100%; }
            .text-field h2{color: #fff; background-color: #ff481c; display: inline-block; font-size: 16px; padding: 5px 10px; font-weight: bold; text-transform: uppercase;}
  </code></pre>