javascripthtmlflexslider

Text Overlay on Flexslider


I'm using flexslider and I'm trying to add a separate text overlay to each slide, but am not having much luck.

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

Solution

  • How i handled this was simply added a <span> tag with a class name below the images and then position them with 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;
    }
    

    My flexslider had a black gradient at the bottom so I make my text white so you could read it properly. Hope that helps.