How to realize a fixed-width div with scrolling content on hover? - html

Question

I am trying to create a div containing 2 divs: one for a cover img and the other div with some text.
I would love to show only the image and move it away on hover to show the text.
I wrote this code using absolute positioning and css transitions but there's something wrong.
It works great in Chrome but it doesn't in Firefox.
http://jsfiddle.net/5NHh2/4/
Could someone help me?
I think the problem is the overflow:hidden set to the main div.
Thank you very much
This is the html code:
<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>​
And this is the 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

Added .container, .info-box {overflow:hidden;} to the end.
Works in firefox for me here: http://jsfiddle.net/5NHh2/5/