JSFiddle - React, Tailwind, and code Playground

HTML

<link href='http://fonts.googleapis.com/css?family=Arvo' rel='stylesheet' type='text/css'><span style="margin-left: 80px;"><a href="http://jamesrossini.com/" target="_blank">The James Kyle</a></span><span style="float:right; margin-right: 80px;"><a href="https://twitter.com/thejameskyle" target="_blank">Twitter</a> | <a href="https://plus.google.com/114219281805415139374/" target="_blank">Google +</a> </span>
<br/><br/><br/><br/><a target="_blank" href="http://forrst.com/people/thejameskyle/follow/ON5YwS3TVjNBmRx1IBQMLFubQUOTUW0HRhdeUlLJTZHQGbN1MMNbM9ZRQVDGmdxguwN1gM3V">

<!-- BELOW THIS LINE IS ALL YOU NEED-->  
    
<div class="container">
    <span class="motionblur">Motion Blur</span>
    <span class="mb m1">Motion Blur</span>
    <span class="mb m2">Motion Blur</span>
    <span class="mb m3">Motion Blur</span>
    <span class="mb m4">Motion Blur</span>
    <span class="mb m5">Motion Blur</span>
    <span class="mb m6">Motion Blur</span>
    <span class="mb m7">Motion Blur</span>
    <span class="mb m8">Motion Blur</span>
    <span class="mb m9">Motion Blur</span>
    <span class="mb m10">Motion Blur</span>
</div>

CSS

body {font-family: 'Arvo', serif;}
a {color: #000;text-decoration: none;}

/***** BELOW HERE IS WHAT YOU WANT *****/

.container {
    width: 500px;
    margin: 1em auto;
    font-size: 5em;
    text-align: center;
}
.container .mb:hover, .container .motionblur:hover {
    zoom: 1;
    *filter: alpha(opacity=10); /*IE6+7 Hack*/
    opacity: 0.1;
    line-height: 1em;
    margin-top: -1em;
    position: relative;
    display: block;
    -webkit-transition: margin-left 0.5s ease-in-out;
     -khtml-transition: margin-left 0.5s ease-in-out;
       -moz-transition: margin-left 0.5s ease-in-out;
         -o-transition: margin-left 0.5s ease-in-out;
            transition: margin-left 0.5s ease-in-out;
}
@media \0screen {.container .mb, .container .motionblur {filter: alpha(opacity=10);}} /*IE8 Hack*/

.m1 {margin-left: -2px;}
.m2 {margin-left: -4px;}
.m3 {margin-left: -6px;}
.m4 {margin-left: -8px;}
.m5 {margin-left: -10px;}
.m6 {margin-left: 2px;}
.m7 {margin-left: 4px;}
.m8 {margin-left: 6px;}
.m9 {margin-left: 8px;}
.m10 {margin-left: 10px;}

/***** ABOVE HERE IS WHAT YOU WANT *****/

/**** Hover State (makes it go back to normal) ****/
.container:hover .mb {margin-left: 0px;}
.container:hover .motionblur {text-shadow: #FFF 0px 0px 1px;} /* makes it look better */