Text Blur

by jakie8

HTML

<span class="blur">Blurred on Hover</span>
<span class="unBlur">Focused on Hover</span>

CSS

.blur, .unBlur{
    display:block;
    text-align:center;
    font-family:arial;
    font-size:36px;
    margin-top:50px;
    font-weight:bold;
    color:transparent;
    
    text-shadow:0 0 0 #333;
    
    -webkit-transition: all 0.5s linear;  
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
.blur:hover{
    text-shadow:0 0 20px #333;
    cursor:default;
}
.unBlur{
    color:transparent;
    text-shadow:0 0 20px #333;
}
.unBlur:hover{
    text-shadow:0 0 0 #333;
    cursor:default;
}