Reputation:
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
Reputation: 157434
If you want a pure CSS solution than you can spoof it using CSS text-shadow
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);
}
Upvotes: 5
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.
Upvotes: 1
Reputation: 57105
Working Demo http://jsfiddle.net/cse_tushar/cx2UR/
<p id="para">Text</p>
.blur {
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
body{
font-size:20px;
}
$(document).ready(function(){
$('#para').hover(function(){
$(this).addClass('blur');
}).mouseout(function(){
$(this).removeClass('blur');
});
});
p:hover
{
color: transparent;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
Upvotes: 2