Submit your widget

JQuery Text Hover Blur effect

Created 12 years ago   Views 19254   downloads 2346    Author blogspot
JQuery Text Hover Blur effect
View DemoDownload
Share |

the  code will make a text blur on hover,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.



This is the code for effect with Just CSS


    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;

   text-shadow: 0px 0px 10px #FF33FF;

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'})

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



<a href="#" id="blur">With JQuery</a>

<a href="#" class="blur">Pure CSS ( Hover me )</a>

The article source: