文字覆盖在图库上

Question

我正在尝试在我网站上的图库上添加文本覆盖（我正在使用Wordpress）。到目前为止，我已经能够显示文本叠加层，而不是图像顶部。

以下是the link到我的网站。我跟着this guide。

HTML -

<div class="image">
[gallery link="file" columns="4" ids="174,175,176,173"]
<h2><span>+</span></h2>
</div>

CSS -

.image { 
position: relative; 
width: 100%; /* for IE 6 */
}

h2 { 
position: absolute; 
top: 200px; 
left: 0; 
width: 100%; 
}

h2 span { 
color: #000; 
font: bold 24px/45px Helvetica, Sans-Serif; 
letter-spacing: -1px;  
background:  rgba(255, 255, 255, 0.5);
background:  rgba(255, 255, 255, 0.5);
padding: 10px; 
}