Html 如何实现固定宽度的div，并在悬停状态下滚动内容？

我试图创建一个包含2个div的div：一个用于封面img，另一个包含一些文本的div。 我希望只显示图像，并将其移动到鼠标悬停位置以显示文本。 我使用绝对定位和css转换编写了这段代码，但有点错误

它在Chrome中工作得很好，但在Firefox中却不行

有人能帮我吗？ 我认为问题在于溢出：隐藏设置为main div

多谢各位

这是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>​

---

在末尾添加了

.container、.info框{overflow:hidden；}

在firefox中为我工作：

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