Image DIV Covering Child DIV - php

Question

I have a simple program that echoes images out to a page from a database. I want to have a child element, just a simple slightly transparent box shown on top of the images.
I know child elements always has a higher z-index than it's parent but the image always covers over the box I want on top. When the page is loading I can see the box in the position I want but then when the images load and the box it disappears.
Here is a jsFiddle: http://jsfiddle.net/EBvCZ/
PHP
echo '<div id="wrapper">';
while ($data = mysql_fetch_array($query_run)) {
echo '<div id="picback"><div id="centerpic"><'.'img src="resizeimage.php?photo_id='.$data['photo_id'].'">';
echo '<br style="clear:both;" />';
echo '<div id="titlepic">This is an image</div>';
echo '</div></div>';
}
echo '</div>
CSS
#wrapper {
overflow:auto;
width:1000px;
height:1000px;
margin: 20px auto;
}
#titlepic {
background-color:rgba(0, 0, 0, 0.5);
top:100px;
width:200px;
height:35px;
position:relative;
}
#centerpic {
position:relative;
margin:auto;
width: 200px;
height: 150px;
top:18.75px;
overflow:hidden;
}
#picback {
position:relative;
margin:10px 23px;
top:75px;
float:left;
width:250px;
height:187.5px;
overflow:hidden;
}
#picback:hover {
background-color:rgb(190,190,190);
-webkit-border-radius:0.4em;
-webkit-transition: background-color 0.5s;
}

Answer 1

Here is a working js fiddle:
http://jsfiddle.net/XKHZv/3/
I did some .css changes and also moved one div before the titlepic.
Here is your new .css:
#wrapper {
overflow:auto;
width:1000px;
height:1000px;
margin: 20px auto;
}
#titlepic {
margin-left:auto;
margin-right:auto;
background-color:rgba(0, 0, 0, 0.5);
width:200px;
height:35px;
position:relative;
clear: both;
}
#centerpic {
position:relative;
margin:auto;
width: 200px;
height: 150px;
top:18.75px;
overflow:hidden;
}
#picback {
position:relative;
margin:10px 23px;
top:75px;
float:left;
width:250px;
height: 203.75px;
overflow:hidden;
}
#picback:hover {
background-color:rgb(190, 190, 190);
-webkit-border-radius:0.4em;
-webkit-transition: background-color 0.5s;
}
Then you also have to move a div closing to before the title pic.