how to fix div position - html

Question

would you see guys. my each image bottom have one caption bar with title. but that not same height for all box. all i want it will same height in all box and if you rollover then you will see that box slideup that's fine. also it will resposive. i am still trying but can not figureout it. would you guess see where i mistake. i just want to make that perfect. even if you any other css or js like that with responsive support then post here please.
thanks
http://jsfiddle.net/BAVXH/
bellow is css for caption
.box {
float: left;
border: 1px solid #FFF;
margin: 2px;
position: relative;
overflow: hidden;
background-color: #F00;
}
.box img {
position:relative;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
.box .caption {
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
text-align: left;
padding: 2%;
top: 92%;
height:96%;
}
.box:hover .caption {
-moz-transform: translateY(-89%);
-o-transform: translateY(-89%);
-webkit-transform: translateY(-89%);
opacity: 1;
transform: translateY(-89%);
}

Answer 1

You could use something like this with jQuery and calculate the top for each caption.
for(i=0;i<8;i++){
var h = $('.col-'+i).height();
$('.col-'+i).find(".caption").css("top",h-25 + "px");
}
Hope this gives you an idea.

Answer 2

put height in px not in % like
.box .caption {
background-color: rgba(0, 0, 0, 0.8);
position: absolute;
color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
text-align: left;
padding: 2%;
top: 92%;
height:100px;
}