Blur text using CSS and jQuery on hover

Question

How to make text blured using css class and jquery when hover .

<p>Text</p>

on hover it should turn blured

Answer 1

If you want a pure CSS solution than you can spoof it using CSS text-shadow

Demo

p:hover {
   color: transparent;
   text-shadow: 0 0 2px rgba(0,0,0,0.7);
}

Here, I've used rgba where a stands for alpha, which is nothing but opacity... and if you want to smooth up the effect on hover, use CSS transition property.

p {
    -webkit-transition: all .5s;
    transition: all .5s;
}

p:hover {
   color: transparent;
   text-shadow: 0 0 2px rgba(0,0,0,0.7);
}

Demo 2