Display image hover div at vertically middle prob

all

I want to display a horizontal stripe on image to vertical a开发者_如何学运维lign. this is my code

Html

<div class="demobox" id="demo-5">
        <img src="Untitled-1000x288.jpg" />
        <div class="details">
            <h3>Play Trialer</h3>
        </div>
</div> 

css

#demo-5 {
    position: relative;
}

.demobox {

    float: left;
    height: 288px;

    overflow: hidden;
    width: 1000px;
}

#demo-5:hover .details {
    margin-left: 0;
}

#demo-5 .details {
    left: 0;
    margin-left: -1200px;
    opacity: 0.7;
    filter:alpha(opacity=70);
    position: absolute;
    top: 0;
}

.details {
    background: none repeat scroll 0 0 #000000;
    color: #FF0000;
    height: 50px;
    margin-top: 119px;
    text-align: center;
    width: 735px;
}

Now problem is images are not with fixed height & width.And i want to display horizontal stripe in middle, how can i ?

will greatly appreciate your help !!

You need to set container's css position to relative and absolutelly position the title of the image inside the container.

The trick is in usage of percentage vertical positioning and subtracting half of stripes height via margin-top.

Quick example on jsfiddle.

Edit: I badly read the question... here is the corrected answer :-)