<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

<div id="twitter" class="big-section">
        <div class="container">
            <div id="twitter-rectangle" class="row">
                <div class="col-xs-6">
                    <div id="tw-1" class="tw-outside">
                        <div class="tw-text">Follow Us On Twitter</div>
                        <div class="tw-click">
                            <a href="https://twitter.com/scotch_io" class="twitter-follow-button" data-show-count="false">Follow @scotch_io</a>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div id="tw-2" class="tw-outside">
                        <div class="tw-text">Follow Chris!</div>
                        <div class="tw-click">
                            <a href="https://twitter.com/sevilayha" class="twitter-follow-button" data-show-count="false">Follow @sevilayha</a>
                        </div>
                    </div>
                </div>
            </div>
            <div id="twitter-circle" class="row">
                <div class="col-xs-6">
                    <div id="tw-3" class="tw-outside">
                        <div class="tw-text"><span class="fa fa-twitter"></span></div>
                        <div class="tw-click">
                            <a href="https://twitter.com/scotch_io" class="twitter-follow-button" data-show-count="false">Follow @scotch_io</a>
                        </div>
                    </div>
                </div>
                <div class="col-xs-6">
                    <div id="tw-4" class="tw-outside">
                        <div class="tw-text"><span class="fa fa-twitter"></span></div>
                        <div class="tw-click">
                            <a href="https://twitter.com/sevilayha" class="twitter-follow-button" data-show-count="false">Follow @sevilayha</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
.big-section     { color:#FFF; padding-top:70px; }
.row             { margin-bottom:100px; text-align:center; }

h1               { font-size:40px; padding-bottom:30px; padding-top:30px; text-align:center; }

/* TWITTER =========================================== */
#twitter         { background:#1CC1F7; }

    /* twitter rectangles =================================================== */
    #twitter-rectangle .tw-outside         { background:#0081b7; display:block; height:55px; position:relative; }
    
    #twitter-rectangle .tw-text, #twitter-rectangle .tw-click { cursor:pointer; display:block; height:100%; padding-top:15px; position:absolute; width:100%; 
        transition:0.3s ease all;
    }
    #twitter-rectangle .tw-text            { font-size:20px; font-weight:700; z-index:9999; }
    #twitter-rectangle .tw-click           { z-index:8888; }
    
    /* twitter 1 ------------------------------------- */
    #tw-1                   { overflow:hidden;  }
    #tw-1 .tw-click         { margin-top:-100px; }
    
    #tw-1:hover .tw-text      { margin-top:100px; }
    #tw-1:hover .tw-click     { margin-top:0; }

    /* twitter 2 ------------------------------------ */
    #tw-2                     {  }
    #tw-2 .tw-text            { background:#42e7ff; height:100%; width:100%; }
    #tw-2 .tw-click           {  }
    
    #tw-2:hover .tw-text      { margin-top:-55px; }
    #tw-2:hover .tw-click     { margin-top:0; }
    
    /* twitter circles ====================================================== */
    #twitter-circle .tw-outside         { display:block; margin:0 auto; position:relative; }
    
    #twitter-circle .tw-text, #twitter-circle .tw-click { cursor:pointer; display:block; position:absolute; width:100%; 
        transition:0.3s ease all;
    }
    #twitter-circle .tw-text            { font-size:20px; font-weight:700; z-index:9999; }
    #twitter-circle .tw-click           { z-index:8888; }
    
    /* twitter 3 ------------------------------------ */
    #tw-3                     { height:100px; width:100px; }
    #tw-3 .tw-text            { background:#0081b7; font-size:60px; height:100%; padding-top:10px; 
        border-radius:50%;
    }
    #tw-3 .tw-click           { background:#42e7ff; opacity:0; padding:10px 10px 5px; margin-top:25px; margin-left:-40px; padding-left:30px; width:auto; 
        border-top-right-radius:5px; border-bottom-right-radius:5px;
    }
    
    #tw-3:hover .tw-text      { transform:rotate(-360deg); margin-left:-100px; }
    #tw-3:hover .tw-click     { opacity:1; margin-left:-20px; }
    
    /* twitter 4 --------------------- */
    #tw-4                     { background:#0081b7; height:50px; overflow:hidden; text-align:center; width:50px; border-radius:50%; transition:0.3s ease all; }
    #tw-4 .tw-text            { font-size:30px; height:100%; padding-top:5px; 
        
    }
    #tw-4 .tw-click           { opacity:0; padding:10px 10px 5px; margin:0 auto; margin-top:0px; }
    
    #tw-4:hover               { width:200px; border-radius:5px; }
    #tw-4:hover .tw-text      { opacity:0; }
    #tw-4:hover .tw-click     { opacity:1; margin-top:5px; }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js