Отображение div при наведении изображения при средней вертикальной вероятности

Question

все

Я хочу отобразить горизонтальную полосу на изображении для выравнивания по вертикали. это мой код

Html

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

1008 * 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;
}

Теперь проблема в том, что изображения не имеют фиксированную высоту и ширину. И я хочу отображать горизонтальный полоса посередине, как я могу?

будет очень признателен за вашу помощь !!

Answer 1

Вам необходимо установить позицию css контейнера, чтобы относительное и абсолютное расположение заголовка изображения внутри контейнера.

Хитрость заключается в использовании процентного вертикального позиционирования и вычитании половины высоты полосы через margin-top.

Быстрый пример на jsfiddle .

Редактировать: я плохо прочитал вопрос ... вот исправленный ответ: -)