Text Focus Effect with CSS and CSS3 Transitions

Preview:

Description:

A pure CSS/CSS3 focus effect that blurs the unnecessary text when you hover over a link, with a smooth CSS3 transition effect.

How to use it:

Create a list of links.

<ul>
<li><a href="#">CSSScript</a></li>
<li><a href="#">CSSScript</a></li>
<li><a href="#">CSSScript</a></li>
<li><a href="#">CSSScript</a></li>
</ul>

Add the blur effect on all links using text-shadow property.

a {
  text-shadow: #fff 0 0 25px;
  -webkit-transition: all .8s ease-out;
  -moz-transition: all .8s ease-out;
  transition: all .8s ease-out;
}

Create the link text focus effect on hover.

a:hover {
  text-shadow: #fff 0 0 0;
  -webkit-transition: all .1s ease-out;
  -moz-transition: all .1s ease-out;
  transition: all .1s ease-out;
}
a:active {
  text-shadow: #fff 0 0 50px;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  transition: all .2s ease-out;
}