CODEWITHSUNDEEP
javascripthtmlflexslider
Peter Chappy
Peter Chappy

Reputation: 1179

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>

Upvotes: 2

Views: 8825

Answers (1)

crazymatt
crazymatt

Reputation: 3286

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.

Upvotes: 4

Related Questions