JSFiddle - React, Tailwind, and code Playground

by Sherbrow

HTML

<script src="http://www.gmarwaha.com/jquery/jcarousellite/js/jcarousellite_1.0.1.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<div class="container">
    <div class="row span4">
        <div id="myCarousel">
            <a class="left carousel-control prev" >< </a>

            <div class="carousel-container">
                <ul>

                    <li class="thumbnail thumb-hover">
                        <img src="http://blog.laptopmag.com/wpress/wp-content/uploads/2012/02/Google-logo-small-t-100x100.jpg"/>
                        <div class="mask">
                            <h4>
                                This is a title
                            </h4>
                            <p>This is a test</p>
                        </div>
                            
                    </li>

                    <li class="thumbnail thumb-hover">
                        <img src="http://blog.laptopmag.com/wpress/wp-content/uploads/2012/02/Google-logo-small-t-100x100.jpg"/>

                        <div class="mask">
                            <h4>
                                This is a title
                            </h4>
                            <p>This is a test</p>
                        </div>
                            
                    </li>

                </ul>
            </div>

            <a class="right carousel-control next"> ></a>
        </div>
    </div>
</div>

<div class="row">
    <h3>This is some content at the bottom</h3>
</div>

CSS

/* Hover styles */

.thumb-hover
{
    float: left;
    overflow: visible !important;
    position: relative;
}

.thumb-hover .mask
{
    width: 100%;
    position: absolute;
    overflow: visible;
    top: 90px;
    left: 0;
    height: 100px;
}

.thumb-hover h4, .thumb-hover p
{
    color: #fff;
    padding-left: 9px;
    padding-right: 9px;
    padding-top: 9px;
}


/* hovering parts */
.thumb-hover .mask
{
    background-color: #000;
    filter: alpha(opacity=0);
    opacity: 0;
}

.thumb-hover:hover
{
    border: 1px solid #995566;
}

.thumb-hover:hover .mask
{
    opacity: 1;
    -webkit-transition-delay: 0s;
    -moz-transition-delay: 0s;
    -o-transition-delay: 0s;
    -ms-transition-delay: 0s;
    transition-delay: 0s;
}

/* Carousel styles */

.carousel-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-left: 9px;
    line-height: 1;
}
   
.carousel-control {
    height: 20px;
    left: 15px;
    line-height: 20px;
    margin-top: -20px;
    opacity: 0.5;
    position: absolute;
    text-align: center;
    top: 40%;
    width: 20px;
    font-size: 25px;
    cursor: pointer;
}

.carousel-control {
    margin-top: -200px;
}

.carousel-control.right {
    left: auto;
    right: 0px;
}

.carousel-control.left {
    left: 0px;
}

.carousel-container
{
    position: relative;
    visibility: hidden;
    left: -5000px;
}

.carousel-container:hover {
    overflow-y: visible!important;
    overflow-x: visible!important;
}

JavaScript

$("#myCarousel .carousel-container").jCarouselLite({
                btnNext: "#myCarousel .next",
                btnPrev: "#myCarousel .prev",
                circular: true,
                visible: 2,
                scroll: 1
            });