Create text blur!

by dipish

HTML

<div class="blurrable">
    <p>Hover to blur me! <i>Note: this method blurs only text, not images and element outlines</i></p>
    <p>&quot;I view cloud computing as a broad array of web-based services aimed at allowing users to obtain a wide range of functional capabilities on a 'pay-as-you-go' basis that previously required tremendous hardware/software investments and professional skills to acquire. Cloud computing is the realization of the earlier ideals of utility computing without the technical complexities or complicated deployment worries.&quot;</p>
    <p>- Jeff Kaplan</p>
</div>

CSS

body {
    padding: 20px;
}
.blurrable:hover {
    color: transparent !important;
    text-shadow: 0 0 8px grey !important;
    text-decoration: none;
    /* We can also use MS blur filter for IE (but it'll blur everything, not just text) */
    /* For better results we may want to hide/transform certain elements inside the blur area */
}