CODEWITHSUNDEEP
htmlcsshtml-lists
user2013488
user2013488

Reputation: 363

Text over image in list

I'm trying to put a text field inside list and over a image (like this)

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 (like this)

Here is my code :

HTML

         <ul class="panel">

        <li>

        <img src="">

            <span class="text-field" class="clearfix">

            <h2>text</h2>

             </span>

        </li> 
          </ul>

CSS 

          .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;}

Upvotes: 1

Views: 2240

Answers (1)

techfoobar
techfoobar

Reputation: 66693

Specify position: relative for .panel li - For its absolute children to consider its top / left as 0, 0

i.e.

.panel li {display: inline-block; padding-right: 10px; position: relative;}

Upvotes: 3

Related Questions