Text Blur effect with CSS and JQuery

How you would write code if you need to make a text blur on hover?? I had the same question and i am sharing what i got as a solution. The filter blur Just work for IE. I am changing a little bit in text-shadow to create the effect.

Idea

I Got idea from the shadow created with the text-shadow property of CSS, That was blurry as i needed so i made the text transparent. What i got was the thing i was searching for. Yes the magic is in the third parameter of text-shadow: 0px 0px 10px #FF33FF;
I have added some JQuery to make it more cool, When you move your mouse far from text the effect works.

Code

CSS
This is the code for effect with Just CSS

 .blur{

    display: block; 
    text-decoration: none;
    font:  100px Georgia, sans-serif;
    letter-spacing: -5px;  
    text-align: center; 

    //these two lines do the magic

    color: transparent;   

    text-shadow: 0px 0px 1px #FF33FF;
}

.blur:hover{
   text-shadow: 0px 0px 10px #FF33FF;
}
 

Jquery
Here the code that makes it live. This code updates the third parameter on mousemove.

$(document).ready(function() {
    $(document).mousemove(function(e) {
        if(e.pageY> 230)
         $("#blur").css({'text-shadow': '0px 0px '+(( e.pageY - 230) / 18)+'px #FF33FF'})
        else

         $("#blur").css({'text-shadow': '0px 0px 0px #FF33FF'});
    });

});

HTML

<a href="http://motyar.blogspot.com" id="blur">With JQuery</a>

<a href="http://motyar.blogspot.com" class="blur">Pure CSS ( Hover me )</a>

Demo

You can see this code working well here.