JSFiddle - React, Tailwind, and code Playground

by axitdn

HTML

<html class="csstransforms3d">
<div id="container">
    <div class="thumb scroll">
        <div class="thumb-wrapper">
            <img src="http://www.sensesofcinema.com/wp-content/uploads/2010/10/inception1.png" alt="a" />
            <div class="thumb-detail">
                <a href="#">
                    Tạp Chí Lập Trình Giấc Mơ!!!                    
                </a>                
            </div>
        </div>
    </div>    
</div>    
</html>

CSS

#note {
        font-size:11px;
        color:#333;
        padding:10px;
        border:1px solid #b99f35;
        background:#f4eccb;
        border-radius: 3px;
    }
    
    body {
        background:#e7e7e7;
        font-family:arial;
    }
    
    #container {
        margin: 0 auto;
        width: 665px    
    }
    
    .thumb {
        display:block;
        width:200px;
        height:140px;
        position:relative;
        margin-bottom:20px;
        margin-right:20px;
        float:left;
    }
    
        .thumb-wrapper {
            display:block;
            width:100%;
            height:100%;
        }
    
        .thumb img {
            width:100%;
            height:100%;
            position:absolute;
            display:block;            
                    
        }
        
        .thumb .thumb-detail {
            display:block;
            width:100%;
            height:100%;
            position:absolute;            
            background:#fff;
            font-family:arial;
            font-weight:bold;
            font-size:16px;            
        }
        
        .thumb .thumb-detail a {
            display:block;
            width:100%;
            height:100%;
            text-transform:uppercase;
            font-weight:bold;    
            color:#333;
            text-decoration:none;        
            font-family: 'Open Sans', sans-serif;
            letter-spacing:-1px;
            padding:10px;    
            font-size:18px;
        }        
    
    /*
    * Without CSS3
    */
    .thumb.scroll {
        overflow: hidden;
    }    
    
        .thumb.scroll .thumb-detail {
            bottom:-280px;
        }
    
    
    /*
    * CSS3 Flip
    */    
    .thumb.flip {
        -webkit-perspective:800px;        
           -moz-perspective:800px;
            -ms-perspective:800px;                   
             -o-perspective:800px;
                  perspective:800px;
    }
    
        .thumb.flip...

JavaScript

$(function() {
    if ($('html').hasClass('csstransforms3d')) {
        $('.thumb').removeClass('scroll').addClass('flip');
        $('.thumb.flip').hover(

        function() {
            $(this).find('.thumb-wrapper').addClass('flipIt');
        }, function() {
            $(this).find('.thumb-wrapper').removeClass('flipIt');
        });

    } else {

        $('.thumb').hover(

        function() {
            $(this).find('.thumb-detail').stop().animate({
                bottom: 0
            }, 500, 'easeOutCubic');
        }, function() {
            $(this).find('.thumb-detail').stop().animate({
                bottom: ($(this).height() * -1)
            }, 500, 'easeOutCubic');
        });

    }

});