JSFiddle - React, Tailwind, and code Playground

by matku

HTML

<div id="container">
    <div id="inner">
        <div class="image" style="background-image:url(http://www.hdwallpapersinn.com/wp-content/uploads/2013/04/Latest-Nature-Wallpapers-4.jpg);"></div>
        <div class="image" style="background-image:url(http://www.hdwallpapersinn.com/wp-content/uploads/2013/04/hd-wallpapers-nature-desktop-trees.jpg);"></div>
        <div class="image" style="background-image:url(http://www.hdwallpapers3d.com/wp-content/uploads/2013/04/hd-wallpapers-hd-nature-wallpapers.jpg);"></div>
        <div class="image" style="background-image:url(http://www.hdwallpapersinn.com/wp-content/uploads/2013/03/Green-Nature-with-sunrise-wallpaper.jpeg);"></div>
        <div class="image" style="background-image:url(http://4hdwall.com/wp-content/uploads/2012/10/nature-hd-walls.jpg);"></div>
    </div>
</div>

CSS

#container {
    width:100%;
    height:100%;
    position:absolute; 
    
}
#inner {
    position:relative;
    width:100%;
    height:100%;
}
.image {
    position:absolute;
    left:0;
    top:0;
    width:100%; 
    height:100%; 
    background-size:cover;
    z-index: 1;
    -webkit-transform: translate3d(0,0,0); 
    -webkit-transition: -webkit-transform 800ms linear;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d; /* *should* improve performance? */
}

JavaScript

$('.image').click(function(){
    var y = $(this).index()*20 +500;
    if($(this).css('-webkit-transform') !='matrix(1, 0, 0, 1, 0, 0)' ){
        $('.image').filter(function() {
                  return $(this).css('z-index') == '1';
        }).css({zIndex: '0'});
        $(this).css({
            webkitTransform: 'translate3d(0,0,0)',
            zIndex: '1'
        });
    }else{
        $(this).css({
            webkitTransform: 'translate3d(0,'+y+'px,0)',
            zIndex: '2'
        });
    }
});