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

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

现在的问题是图像没有固定的高度和宽度。我想水平显示中间有条纹，怎么办？

非常感谢您的帮助!!

Answer 1

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

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

关于 jsfiddle 的快速示例.

编辑:我没看清楚问题...这是更正的答案:-)