如何隐藏超载的标题文本

Question

我正在尝试创建数据库驱动的幻灯片。但是，当我将静态幻灯片转换为动态幻灯片或数据库驱动的幻灯片时，标题文本会出现在另一个或所有文本上立即被驱动。

<section id="homeSlider">
    <div class="flexslider">
        <ul class="slides">         
    <?php while($slideresut=$slideselect->fetch_assoc()) {  ?>
        <li><img src="images/sliderImages/<?php echo $slideresut['photo']; ?>" 
        style="min-height:500px"/>
        <!--Caption-->
        <div class="flex-caption-left">
            <h1><?php echo $slideresut['title'];?> </h1>
            <h3><?php echo $slideresut['details'];?></h3>
        </div>
        <!--End caption-->
        </li>
        <?php }  ?>
        </ul>
        </div>          
</section>  

CSS Code Here

#teaser, #homeSlider{
position:relative;
text-align:center;
}
#homeSlider{
    height:100%;
    width:100%;
    overflow:hidden !important;
}
#homeSlider ul.slides li{
    position:relative;
    margin-top:10px;
}
#homeSlider ul.slides li img{
    max-width:109%;
}
.flex-caption-left {
    margin-left: -210px;
}
.flex-caption-right {
    margin-right: -220px;
}
.flex-caption-right, .flex-caption-left {
    margin-top: -85px;
    padding: 10px;
    position: absolute;
    top: 50%;
    z-index: 1;
}
.flex-caption-left h1, .flex-caption-right h1{
    font-size:30px;
    margin-bottom:1px;
    text-transform:uppercase;
    font-family: 'robotothin';
    letter-spacing:1px;
    background:#000;
    filter:alpha(opacity = 80);
    background:rgba(0, 0, 0, 0.5);
    padding:16px;
    color:#ffffff;
}
.flex-caption-left h3, .flex-caption-right h3{
    background:#000;
    filter:alpha(opacity = 80);
    background:rgba(0, 0, 0, 0.5);
    font-size:13px;
    padding:10px 20px;
    display:inline-block;
}

谢谢Havelock的最终答案