Motyar

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.

Labels: , ,

By :

12 comments

#

Anonymous islam barkah says…

good job man very simple but good job

can you give any thought about blur divs ?
 
#

Anonymous Motyar says…

Thanx @islambarkah, for a good idea, your problem is over my mind.
 
#

Blogger Nanoinfinity says…

This is a very clever way of doing this! I modified it to be used for spoiler tags in text; the text when not hovered is blurred to the point of illegibility. When hovered it becomes clear.

I have a post about it on my blog including a demo of the spoiler tags in action:
http://philenotfound.blogspot.com/2010/07/spoiler-tags-text-blur-effect-with-css.html

I also created a list of browser support for both "color:transparent" and "text-shadow" including the versions they were introduced in. (Firefox, chrome, IE, Safari and Opera are listed) if anyone is wondering.

Important to note (due to their market share), IE supports neither transparent text nor text-shadow so the text renders as plain black.

Thank you very much for sharing this idea, it is exactly what I was looking for!
 
#

Anonymous Motyar says…

@Nanoinfinity Thanx for the link.
 
#

Blogger Thang says…

doesn't work on IE :(
 
#

Blogger Oytun Tez says…

Thanks for the article...

But I have a bigger problem. I want to apply this bluring on DIVs. There are dynamic DIVs more than one on a page. I want to change the blur like you did with Jquery; closer the mouse less the blur. But it seems a little bit complicated to calculate all of the divs and change the blur of all of them in every move of the mouse...

Any idea?
 
#

Blogger raghibsuleman says…

Thanks for this nice articles
http://www.raghibsuleman.com/
 
#

Blogger asiankid125 says…

This is a pretty old post... However, what I'd like to do with it is timeless!! haha

I want to hover over the word to see it, and as my mouse gets further away from the word (vertically), I want it to shift to the blurry. But the word is at 50% height on the page.

Can the javascript be altered to blur based on relationship of the position of the mouse to the text itself, rather than the browser window?
 
#

Blogger markosansa says…

Hi!!! intresting example... only a question. It's possible to change the css text shadow with opacity jquery?
Something like this:

//set drawmode false
var draw= false;
$(document).ready(function() {
$(document).mousemove(function(e) {
if(e.pageY> 230)
$('.des').animate({'opacity: 0'+(( e.pageY - 230) / 18)}, 400);
$('.norm').animate({'opacity: 1'+(( e.pageY - 230) / 18)}, 400);
else
$('.des').animate({'opacity: 1'+(( e.pageY - 230) / 18)}, 400);
$('.norm').animate({'opacity: 0'+(( e.pageY - 230) / 18)}, 400);
});
});

I tried with this code but not work :(

Thank you in advance.
 
#

Blogger j3susFr33k says…

I have figured out a workaround for IE, You need to use if IE statements, but it works good!

STYLE:

#blur{
display: block;
text-decoration: none;
font: 100px Georgia, sans-serif;
color:#6b1212; /*have to pick color here*/
letter-spacing: -5px;
text-align: center;
/*this line does the magic*/
filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=3);
}

#blur:hover{
filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=0);

JAVASCRIPT:
 
#

Anonymous Praveen says…

Thanks Motyar for a nice article. Can we implement similar thing for Images ? If so can you share it, i am badly in need of it.
 
#

Anonymous Anonymous says…

Is it possible to have the blur respond to your mouse movments? So it responds both verticaly and horisontal? :)
 

Post a Comment