JSFiddle - React, Tailwind, and code Playground

by Brad Christie

HTML

<div class="slide-body" style="float:left;">
    <div class="slide-image slide-image-0">
    </div>
    <div class="slide-text">
        Bottom<br />Text
    </div>
    <div class="slide-content">
        <p>This is the actual content</p>
    </div>
</div>
<div class="slide-body" style="float:left;margin-left:5px;">
    <div class="slide-image slide-image-1">
    </div>
    <div class="slide-text">
        Bottom<br />Text
    </div>
    <div class="slide-content">
        <p>This is the actual content</p>
    </div>
</div>
<div class="slide-body" style="float:left;margin-left:5px;">
    <div class="slide-image slide-image-2">
    </div>
    <div class="slide-text">
        Bottom<br />Text
    </div>
    <div class="slide-content">
        <p>This is the actual content</p>
    </div>
</div>
<div class="slide-body" style="float:left;margin-left:5px;">
    <div class="slide-image slide-image-3">
    </div>
    <div class="slide-text">
        Bottom<br />Text
    </div>
    <div class="slide-content">
        <p>This is the actual content</p>
    </div>
</div>

CSS

.slide-body {
    background-color: black;
    height: 360px;
    width: 109px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}
.slide-body .slide-image {
    position: absolute;
    top: -360px;
}
.slide-body .slide-text {
    position:absolute;
    z-index: 3;
    top: 360px;
}

.slide-image {
    background-image: url(http://dezignus.com/wp-content/uploads/2008/04/vector-floristic-curves-curls.png);
    width: 109px;
    height: 360px;
    background-color: #FF00FF;
}
.slide-image-0 {background-position: -9px -4px;}
.slide-image-1 {background-position: -140px -4px;}
.slide-image-2 {background-position: -272px -4px;}
.slide-image-3 {background-position: -403px -4px;}

.slide-text {
    background-color: #FF8000;
    opacity: 0.75;
    filter: alpha(opacity=0.75);
    width: 100%;
    height: 60px;
}

.slide-content {
    color: #FF00FF;
    width:100%;
    height: 100%;
    z-index: 0;
}

JavaScript

$('.slide-body').hover(function(e){
    $('.slide-image',this).animate({
        top: '0px'
    },500);
    $('.slide-text',this).animate({
        top: '300px'
    },500);
},function(e){
    $('.slide-image',this).animate({
        top: '-360px'
    },500);
    $('.slide-text',this).animate({
        top: '360px'
    },500);
});