JSFiddle - React, Tailwind, and code Playground

HTML

<a class="brand-logo" href="#" title="Roastagram"><h1>Roastagram<span></span></h1></a>

CSS

a.brand-logo{height:70px; width:284px; position:absolute; left: 50%; margin:0 0 0 -152px; padding:5px 10px; display:block;
    -moz-border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; border-radius:0 0 10px 10px; -khtml-border-radius:0 0 10px 10px;
    -webkit-box-shadow:0 -2px 10px 0px red; -moz-box-shadow:0 -2px 10px 0px red; box-shadow:0 -2px 10px 0px red;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 0%, #f9f1c8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f9f1c8));
    background: -webkit-linear-gradient(top, #ffffff 0%,#f9f1c8 100%);
    background: -o-linear-gradient(top, #ffffff 0%,#f9f1c8 100%);
    background: -ms-linear-gradient(top, #ffffff 0%,#f9f1c8 100%);
    background: linear-gradient(top, #ffffff 0%,#f9f1c8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f9f1c8',GradientType=0 );}
a.brand-logo h1{position: relative; height:70px; width:284px; display:block; background: url('http://i.imgur.com/ZrfEP.png') top center no-repeat; text-indent:-999em; margin:0px; padding:0px;}
/*a.brand-logo:hover h1{background-position:bottom center;}*/
a.brand-logo:active h1{position:relative; top:1px;}
a.brand-logo h1 span{
            position: absolute;
            top: 0; left: 0; bottom: 0; right: 0;
    background: url('http://i.imgur.com/ZrfEP.png') bottom center no-repeat;}

JavaScript

jQuery(document).ready(function() {
    $("a.brand-logo").find("span").hide().end().hover(function() {
        $(this).find("span").stop(true, true).fadeIn();
    }, function() {
        $(this).find("span").stop(true, true).fadeOut();
    });
});