I am struggling to hide the text details within a div containing text and image, organized in ul li structure. Despite applying overflow hidden to the .sbox class, the text details refuse to remain hidden and appear to be overflowing.
Explore this issue on JSFiddle - http://jsfiddle.net/SAN6n/
HTML Structure
<div id="content" class="contentList">
<ul id="slist" class="storyList">
<li>
<div id="storyBox1" class="sbox">
<div class="boxContent">
<span class="overlay"><h5>Picture1 </h5></span>
<div class="txtOverlay"><h3>This is spring and the weather looks good ...</h3</div>
<span><img src="http://img13.imageshack.us/img13/38/picture11tp.jpg"/></span>
</div>
</div>
</li>
</ul>
</div>
CSS Styling
.storyList {
width:100%;
height:100%;
}
.sbox {
float:left;
width:300px;
height:150px;
padding: 5px 7px 8px 5px;
margin-top:20px;
margin-right:40px;
background:white;
border:1px solid #DDD;
<!--border radius-->
-webkit-border-radius: 3px;
-moz-border-radius: 2px;
border-radius: 3px;
overflow: hidden;
}
.boxContent {
width:100%;
height:100%;
border: 1px solid #777;
}
.storyList li {
list-style:none;
}
.overlay {
float:left;
opacity: .7;
background: #000;
height: 40px;
width: 300px;
position: absolute;
}
h5{
float:left;
margin-top:0px;
padding:0 0 0 5px;
font-family: Tahoma;
letter-spacing: 0.5px;
font-size:30px;
color: white;
}
.txtOverlay {
opacity: .7;
background: #000;
height: 110px;
width: 300px;
position: absolute;
margin-top:150px;
z-index:1;
font-weight:bold;
float:left;
font-family: OpenSansRegular;
letter-spacing: 0.5px;
font-size:10px;
color: white;
}