Скрытое переполнение, похоже, не работает

У меня есть div, содержащий текст, изображение и текстовые детали внутри ul li, а ниже приведена структура html. Я применил скрытое переполнение к классу .sbox, но, похоже, это не работает, и текстовые данные не кажутся скрытыми и переполненными.

JSFiddle — http://jsfiddle.net/SAN6n/

HTML

  
    
    

     
 
        

            
Picture1 
            
This is spring and weather looks good ...
            
         
      
     
    
    
​

CSS

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


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

}​