Наложение текста на Flexslider

Question

Я использую flexslider, и я пытаюсь добавить отдельный наложенный текст на каждый слайд, но мне не очень повезло.

<div class="flexslider"> 
    <ul class="slides"> 
     <li> 
      <img src="http://placehold.it/350x150"> 
      <div class="RCSlideoverlay">CLICK HERE</div> 

     </li> 
     <li> 
      <img src="http://placehold.it/350x150"> 
     </li> 
     <li> 
      <img src="http://placehold.it/350x150"> 
     </li> 
    </ul> 
</div> 

<script type="text/javascript" charset="utf-8"> 
$(window).load(function() { 
    $('.flexslider').flexslider({ 
    animation: "slide", 
    pauseOnHover: true, 
    controlNav: true, 
    directionNav: false, 
    }); 
}); 
</script> 

Answer 1

Как я перевалено это просто добавили <span> тег с именем класса ниже изображений, а затем установить их с помощью CSS.

HTML:

<li> 
    <a href="#"><img src="http://placehold.it/660x440" width="100%" height="100%"> 
    <span class="flex-caption">Place Hold It Image</span></a> 
</li> 

CSS:

/*Caption Text*/ 
.flex-caption { 
    bottom:50px; 
    color: white; 
    font-size: 16px; 
    line-height: 20px; 
    left:0; 
    padding:0 20px; 
    position:absolute; 
    right:0; 
    text-transform: uppercase; 
    z-index:1; 
} 

Мой FlexSlider был черный градиент на дне, так что я сделать мой текст белым, чтобы вы могли прочитать его правильно. Надеюсь, это поможет.