Question

所有

我想在图像上显示垂直对齐的水平条纹。这是我的代码

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

现在的问题是图像没有固定的高度＆amp; width.And我希望显示水平条纹在中间，我怎么样？

非常感谢您的帮助!!

Answer 1

您需要将容器的css位置设置为relative，并将图像的标题绝对定位在容器内。

诀窍在于使用百分比垂直定位并通过margin-top减去条纹高度的一半。

jsfiddle上的快速示例。

编辑：我读错了这个问题......这是更正的答案： - ）

在垂直中间概率显示图像悬停div

1 个答案: