JSFiddle - React, Tailwind, and code Playground

by sapegin

HTML

<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
<div class="logo">
    <object data="http://nano.sapegin.ru/images/logo.svg#normal" class="logo__image" type="image/svg+xml"></object>
    <a href="#" class="logo__link">Oleg Breslavtsev</a>
</div>

CSS

.logo, .logo__link, .logo__image {
    display:block;
    width:260px;
    height:48px;
    }
.logo {
    position:relative;
    }
.logo__link, .logo__image {
    position:absolute;
    left:0;
    top:0;
    -webkit-transition:all .4s cubic-bezier(0.230, 1.000, 0.320, 1.000);
       -moz-transition:all .4s cubic-bezier(0.230, 1.000, 0.320, 1.000);
         -o-transition:all .4s cubic-bezier(0.230, 1.000, 0.320, 1.000);
            transition:all .4s cubic-bezier(0.230, 1.000, 0.320, 1.000);
    }
.logo__link {
    background:url(http://nano.sapegin.ru/images/logo.svg) no-repeat;
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
    background-size:auto;
    opacity:0;
    }
.logo:hover .logo__link {
    opacity:1;
    }
.logo:hover .logo__image {
    opacity:0;
    }
.no-svg .logo__image {
    display:none;
    }
.no-svg .logo__link {
    opacity:1;
    background:url(http://nano.sapegin.ru/pictures/logo.png);
    }