Проблемы с наложением текста на ссылку изображения

Question

ОК, так что это может быть слишком сложным для обработки CSS/HTML, но я могу также спросить.

У меня есть динамически размещенные изображения, используя код от here.
Что бы я хотел добавить к этим изображениям, это текстовое наложение с прозрачным фоном.
Нечто вроде this.

Я думаю, что проблема связана с плавающими изображениями. Также возможно, что мои изображения также являются ссылками. Я пробовал много вариантов и руководств, но просто не могу понять, почему он не работает. Меня не интересуют изображения с непрозрачностью, я не думаю, что это влияет на вещи. Текущий код получает текст рядом с изображением. Пример можно увидеть here.

HTML;

<div id="internal"> 
    <div id="row2"> 
     <a href="studies.php"><img src="images/gallery/studies/STUDY1.jpg" width="200" height="200" alt="Studies Gallery"/></a><h2><span>Some text.</span></h2> 
     <div id="movers-row2"> 
      <div><a href="mediaunits.php"><img src="images/gallery/mediaunits/media1.JPG" width="200" height="200" alt="Media Units Gallery"/></a></div> 
      <div><a href="freestandingfurniture.php"><img src="images/gallery/freestandingfurniture/furniture1.JPG" width="200" height="200" alt="Furniture Gallery"/></a></div> 
     </div> <!-- end #movers --> 
    </div> <!-- end #row --> 
    <div style="clear: both;"></div> 
</div> <!-- end #internal --> 

CSS;

#internal 
{ 
    width: 958px; 
    height: auto; 
    background-color: white; 
    border: 1px solid #ccc; 
} 

#row2 { 
    min-width: 480px; 
    display: block; 
    border: 0px; 
} 

#row2 a img { 
    position: relative; 
    background-color: black; 
    opacity: 0.7; /* transparent */ 
    filter:alpha(opacity=70); /* IE transparent */ 
} 

#row2 h2 { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    float: left; 
} 

#row2 span { 
    color: white; 
    font: bold 24px Helvetica; 
    letter-spacing: -1px; 
    background: rgba(0, 0, 0, 0.7); 
    padding: 10px; 
} 

#movers-row2 { 
    margin: -204px 0 0 200px; 
    height: auto; 
    overflow: hidden; 
} 

#movers-row2 div { 
    width: 49.9%; 
    float: left; 
} 

#movers-row2 div img { 
    float: right; 
} 

Answer 1

Некоторые люди на css-tricks.com помогли мне с решением;

Solution

Answer 2

http://dl.dropbox.com/u/7573777/z_working-folder/stacko.html

Если применить непрозрачность в контейнер, который содержит фоновое изображение и основная область содержимого белой за ним и применить непрозрачность h2 фона, который держит пролет с не выцветшим текстом , эффект теряется в двух непрозрачности. Текст белый, поэтому он тоже исчезает. Для позиционирования мне интересно, будет ли приведенная выше ссылка работать для вас. :)