Q:

Using CSS to put some DIVs over a picture (+explaining images)

    
    
    '.$row['titulo'].''.$contenido.time_since(strtotime($row['dt'])).'
    
    ');
    }
    ?>
The styles are in a separate file and they are:
.newsticker-jcarousellite { width:600px; }
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }
.newsticker-jcarousellite .thumbnail { float:left; width:50px; height:50px; }
.newsticker-jcarousellite .info { float:right; width:535px; }
.newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; }

All generates this:

But now, i need to add 3 litle div on the lower part of the profile picture all of them with a black (35% transparent) background where i can put some text, the result must look like this:

Im very new at css, and i realy dont have any idea how to do this, thanks for any help!

A:

Complete code (untested):
HTML/PHP:
<div id="newsticker-demo">    
    <div class="newsticker-jcarousellite">
<ul>
<?php
echo('<li>
<div class="thumbnail"><img src="'.$fotoperfil.'">
    <div class="txt">
        <span>t1</span>
        <span>t2</span>
        <span>t3</span>
    </div>
</div>
<div class="info"><a href="'.$linkpregunta.'">'.$row['titulo'].'</a><span class="cat">'.$contenido.time_since(strtotime($row['dt'])).'</span></div>
<div class="clear"></div>
</li>');
}
?></ul></div></div>

CSS:
.newsticker-jcarousellite { width:600px; }
.newsticker-jcarousellite ul li{ list-style:none; display:block; padding-bottom:1px; margin-bottom:5px; }
.newsticker-jcarousellite .thumbnail { float:left; width:50px; height:50px; position:relative /* <- new property */ }
.newsticker-jcarousellite .info { float:right; width:535px; }
.newsticker-jcarousellite .info span.cat { display: block; font-size:10px; color:#808080; }

/* new */
.newsticker-jcarousellite .thumbnail .txt { position:absolute; left:0; right:0; bottom:0; background:#000; background:rgba(0,0,0,0.35); }

