Question

all

I want to display a horizontal stripe on image to vertical align.
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 !!

Answer 1

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 🙂