JSFiddle - React, Tailwind, and code Playground

by kalmarsh80

HTML

<div class="shadow-box box box_col masonry-brick" data-pid="a_0b1363a6f1fbe598025d18793cd381b9" style="">
    <div class="masonry_front">
        <div class="masonry_image">
            <div class="button-wrapper button1">
                <button class="love-flip track_decal flip-it" type="button">Riff It</button>
            </div>
            <img src="http://upload.wikimedia.org/wikipedia/commons/e/ee/ShaniaTwainJunoAwardsMar2011.jpg" />
        </div> <span class="caption">awesome picture</span>

        <input type="hidden" class="postArtistId" value="245152059" />
        <table class="metrics">
            <tbody>
                <tr>
                    <td><span style="margin-left:5px;">2</span>  <i class="icon-eye-open" style="margin-right: 10px;"></i>

                    </td>
                    <td><span style="margin-left:5px;">1</span>  <i class="icon-heart" style="margin-right: 10px;"></i>

                    </td>
                </tr>
            </tbody>
        </table>
        <div class="foot">My girlfriends!</div>
        <div style="margin:5px 10px;"> <a href="/"><img src="http://lockerz-media-prod.s3.amazonaws.com/20155372_220931_109682_273612_small.jpg" style="width:26px;" /></a>
 <a href="/">Somebody </a>

        </div>
    </div>
    <div class="masonry_image_back"> <a class='close_masonry_image_back' href='#'><img src='http://latitu.de/assets/x-big-grey.png' /></a>

        <img src="https://d8o6wu1tc2zf3.cloudfront.net/pegasus/4.5.112/bundles/lockerzglobal/images/decal_back_overlay.png" class='back_overlay' />
        <img src="http://upload.wikimedia.org/wikipedia/commons/e/ee/ShaniaTwainJunoAwardsMar2011.jpg" class="back_sample_img" />
        <div class="riff_it_back">
            <h2>hello world</h2>
        </div>
    </div>
</div>

CSS

/* general */
 .box {
    display: inline-block;
    behavior: url(/resources/css/PIE.htc);
    font-size: 11px;
    background: #FFF;
    box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
    -moz-box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    -webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);
    display: block;
    float:left;
    width: 240px;
    position:relative;
}
.foot {
    background: #DCE7F4;
    padding: 10px 5px 10px 10px;
    position: relative;
}
.box_col .masonry_front {
    background: #FFF;
    left: 0;
    position: relative;
    top: 0;
    z-index: 99;
    -webkit-transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateY(0deg);
    -moz-backface-visibility: hidden;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.box_col {
    -webkit-perspective:800px;
    -moz-perspective:800px
}
.box_col .masonry_image img {
    width:240px;
}
.box_col .masonry_image_back img {
    max-width:240px;
}
.box_col.flip .masonry_front {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg)
}
.box_col .masonry_image_back {
    background:#fff;
    height:100%;
    left:0;
    overflow:hidden;
    position:absolute;
    top:0;
    width: 240px;
    z-index:8;
    -webkit-transform:rotateY(-180deg);
    -webkit-transform-style:preserve-3d;
    -webkit-backface-visibility:hidden;
    -moz-transform:rotateY(-180deg);
    -moz-backface-visibility:hidden;
    -o-transition:all .2s ease-in-out;
    -ms-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -webkit-transition:all .2s ease-in-out;
    transition:all .2s ease-in-out
}
.box_col.flip .masonry_image_back {
    -webkit-transform:rotateY(0deg);
    -moz-transform:rotateY(0deg);
    z-index:100
}
.box_col .masonry_image_back...

JavaScript

$(".close_masonry_image_back").live('click', function () {
    $(this).parent().parent().removeClass('flip');
});

$(".button-wrapper").live('click', function () {
    alert('hi');
});

$(".love-flip").live('click', function (e) {
    e.stopPropagation();
    $(this).parent().parent().parent().parent().addClass('flip');
});