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="">
           <div class="RCSlideoverlay">CLICK HERE</div>

        </li>
        <li>
            <img src="">
        </li>
        <li>
            <img src="">
        </li>
    </ul>
</div>

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

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>

• javascript
• html
• flexslider

• Well, it appears that you might need some javascript – Phil Commented Nov 5, 2014 at 17:24
• could you at least point me in the right direction? Relatively new to front end development, and just trying to learn. – Peter Chappy Commented Nov 5, 2014 at 17:43

1 Answer 1

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.