如何在悬停的滚动内容上实现固定宽度div

Question

我正在尝试创建一个包含2个divs的div：一个用于封面img，另一个带有某些文本的div。我很想只显示图像，然后将其移开悬停以显示文本。我使用绝对定位和CSS过渡编写了此代码，但是有问题。

它在Chrome中效果很好，但不在Firefox中。

http://jsfiddle.net/5nhh2/4/

有人可以帮我吗？我认为问题是溢出：隐藏设置为主部门

非常感谢

这是HTML代码：

<div class="container">
<div class="info-box">
    <a href="#" title="">
        <div class="cover">
            <img src="http://placehold.it/180x267" />
        </div>
        <div class="info">
            <h5>A Title</h5>
            <p>Some text</p>
        </div>
    </a>
</div>
<div>​

这是CSS：

    .container {
        background:#000;
        text-align:center;
        padding:10px;
    }
    .info-box{
        text-align:left;
        overflow:hidden;
        position:relative;
        background:#ddd;
        display:inline-table;
        margin:0 10px 10px;
    }
    .info-box,
    .info-box img,
    .info-box .cover {
        width:180px;
        height:267px;
    }
    .info-box a {
        text-decoration:none;
        color:#333;
        display:block;
        position:absolute;
        top:0;
        left:0;
        width:180px;
        height:534px;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }
    .info-box .info {
        box-shadow:inset 0 0 2px #000;
    }
    .info-box a:hover{
        top:-267px;
    }
    .info-box .info {
        width:160px;
        height:247px;
        padding:10px;
        position:relative;
    }
    .info {
        text-shadow:0 1px 0 #fff;
    }
    .info-box .info h5 {
        font-family:'Trebuchet MS',Arial,sans-serif;
        overflow:hidden;
        white-space:nowrap;
        text-overflow:ellipsis;
        margin-bottom:10px;
    }

Answer 1

将 .container, .info-box {overflow:hidden;}添加到末端。

在这里为我工作：http：//jsfiddle.net/5nhh2/5/