JSFiddle - React, Tailwind, and code Playground

by BandonRandon

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="https://raw.github.com/roncioso/Flip-jQuery/master/jquery.flip.min.js"></script>
<div class="squareListHolder">
                <div title="Click to flip" class="square">
                    <div class="squareFlip">
                        <img src="http://melody.kcdtest.com/core/themes/melody2012/images/square/twitter.png">
                        <img alt="" src="http://melody.kcdtest.com/core/themes/melody2012/images/square/social_overlay.png" class="squarehoverimage">
                    </div>
                    
                    <div class="squareData">
                        <div class="squareDescription">
                            Follow Me On Twitter
                        </div>
                        <div class="squareURL">
                            <a href="http://twitter.com">View Profile </a>
                        </div>
                    </div>
                </div>
                
           
        <div class="clear"></div>
    </div>

CSS

.squareListHolder{
    margin-bottom:30px;
}

.square{
    width:210px;
    height:210px;
    float:left;
    margin:10px;
    
    /* Giving the sponsor div a relative positioning: */
    position:relative;
    cursor:pointer;
}

.squareFlip{
    /*  The sponsor div will be positioned absolutely with respect
        to its parent .sponsor div and fill it in entirely */

    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border:1px solid #ddd;    
    background:no-repeat center center #f9f9f9;
}

.squareFlip:hover{
    border:1px solid #999;
    /* CSS3 inset shadow: */
    -moz-box-shadow:0 0 30px #999 inset;
    -webkit-box-shadow:0 0 30px #999 inset;
    box-shadow:0 0 30px #999 inset;
}

.squareFlip img{
    position:absolute;
}

.squareData{
    /* Hiding the .sponsorData div */
    display:none;
}

.squareDescription{
    font-size:11px;
    padding:50px 10px 20px 20px;
    font-style:italic;
}

.squareURL{
    font-size:10px;
    font-weight:bold;
    padding-left:20px;
}

.clear{
    /* This class clears the floats */
    clear:both;
}

.squarehoverimage { position: absolute; top: 0; left: 0; display: none; }
.squareFlip:hover .squarehoverimage { display: block; }

JavaScript

$('.squareFlip').bind("click",function(){
            // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
        var elem = $(this);
            // data('flipped') is a flag we set when we flip the element:
        if(elem.data('flipped'))
        {
            // If the element has already been flipped, use the revertFlip method
            // defined by the plug-in to revert to the default state automatically:
            elem.revertFlip();
            // Unsetting the flag:
            elem.data('flipped',false)

        }
        else
        {
            // Using the flip method defined by the plugin:
            elem.flip({
                direction:'lr',
                speed: 350,
                color: 'transparent',
                onBefore: function(){
                    // Insert the contents of the .sponsorData div (hidden from view with display:none)
                    // into the clicked .sponsorFlip div before the flipping animation starts:
                    
                    elem.html(elem.siblings('.squareData').html());

                }
                            

            });
            // Setting the flag:
            elem.data('flipped',true);


        }

    });