JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css">
<script src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
<script src="http://flexslider.woothemes.com/js/jquery.easing.js"></script>
<script src="http://flexslider.woothemes.com/js/jquery.mousewheel.js"></script>
<section class="slider">
    <div class="flexslider carousel">
        <ul class="slides">
            <li>
                <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
                <span class="testtest">google</span>
            </li>
            <li>
                <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
                <span class="testtest">YAHOO</span>
            </li>
            <li>
                <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
                <span class="testtest">msn</span>
            </li>
            <li>
                <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" />
                <span class="testtest">ALEXA</span>
            </li>
        </ul>
    </div>
</section>

CSS

.testtest{
    top: 0;
    position: absolute;
    left: 0;
    background: #F00;
    width: 50%;
    text-align: center;
    height: 30px;
    line-height: 30px;
    display:none;
    transition: 0.4s;
}

.flexslider .slides > li:hover .testtest{
    display:block;
}

.testtest:hover{
    background: #339BD6;
    
}

.flexslider .slides > li{
    position: relative;
}

JavaScript

$('.flexslider').flexslider({
    animation: "slide",
    animationLoop: true,
    itemWidth: 400,
    itemMargin: 5,
    pausePlay: false,
    start: function (slider) {
        $('body').removeClass('loading');
    }
});