Create a box with text over an image in a grid

Create a box with text over an image in a grid

I'm trying to create a grid view of 12 images in 3 columns with a text box
overlay at the bottom of each. I had my grid working perfectly until I
tried to put the text box on top. I have a feeling that the box with text
should be a child of the image, but I'm not sure how to do that.
I've currently only applied the classes to the first image in attempt to
get it working before moving onto the others. I've also got an issue with
trying to get the text aligned in the middle of the box. If anyone could
help me with either/both of these issues it would be much appreciated!
This is my css:
section{
width: 940px;
min-height: 400px;
margin: 0 auto;
padding: 10px 0 0 0;
}
.grid-large {
margin: 16px 0 0 16px;
float: left;
}
.transbox {
height: 50px;
width: 300px;
margin-top: -50px;
background-color:#362e26;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}
.category-label{
color: #fff;
margin: 0;
margin-left: 15px;
margin-top: 5px;
vertical-align: middle;
}
.first {
margin-left: 0;
}
and my html:
<section>
<img src="./images/gowns.jpg" width ="300" height="300"
class="grid-large.first">
<div class="transbox">
<p class="category-label">wedding gowns</p>
</div>
<img src="./images/bridesmaid.jpg" width ="300" height="300"
class="grid-large">
<img src="./images/menswear.jpg" width ="300" height="300"
class="grid-large">
<img src="./images/venues.jpg" width ="300" height="300"
class="grid-large.first">
<img src="./images/planners.jpg" width ="300" height="300"
class="grid-large">
<img src="./images/photographers.jpg" width ="300" height="300"
class="grid-large">
</section>