CODEWITHSUNDEEP
jquerycss
user2336648
user2336648

Reputation:

Blur text using CSS and jQuery on hover

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

<p>Text</p>

on hover it should turn blured

Upvotes: 3

Views: 3953

Answers (3)

Mr. Alien
Mr. Alien

Reputation: 157434

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

Upvotes: 5

Mircea
Mircea

Reputation: 11623

What about a real CSS blur. Works only on webkit browsers but its the real deal. If not supported you can go with a fallback as the ones provided by Mr. Alien and Palash Mondal

var blur;

if ('-webkit-filter' in document.body.style) {
    blur = 'filter';    
} else {
    blur = 'shadow';
}

$(document).ready(function(){
    $('#text').hover(function(){
        $(this).addClass(blur);
    }).mouseout(function(){
        $(this).removeClass(blur);
    });
});

Edited the code to add a fallback if CSS filters are not supported. Its not triggered by jQuery hover (not my first choice) and fallsback to Mr. Alien text shadow.

http://jsfiddle.net/buvMF/2/

Upvotes: 1

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

Working Demo http://jsfiddle.net/cse_tushar/cx2UR/

HTML

<p id="para">Text</p>

CSS

.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
body{
    font-size:20px;
}

jQuery

$(document).ready(function(){
    $('#para').hover(function(){
        $(this).addClass('blur');
    }).mouseout(function(){
        $(this).removeClass('blur');
    });
});

Or Using CSS Only

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

Upvotes: 2

Related Questions