By Line hover effect

created by sagive seo www.sagive.co.il

by Sagive Seo

HTML

<h1><a href="http://www.sagive.co.il/tutorials/web-design/unique-hover-background-link-effect/">Sagive SEO creates beautifull css effect that helps your site shine!</a></h1>

CSS

@import url(http://fonts.googleapis.com/css?family=Oswald);

h1 {border: 1px solid #ccc; text-align: center; width: 300px; padding: 10px;}
h1 a {font-size: 36px; font-family: 'Oswald', sans-serif;text-transform: uppercase;line-height: 1.15em;
  background-size: 200.22% auto;
  -webkit-background-size: 200.22% auto;
  -moz-background-size: 200.22% auto;
  
  background-position: -0% 0;
  background-image: linear-gradient(to right, rgba(255,255,255,0) 50%, #ddd 50%);
  transition: background-position 0.5s ease-out;
  -webkit-transition: background-position 0.5s ease-out;
      position: relative;
  z-index: 2;
    color: #555;
    text-decoration: none;
}

h1 a:hover {background-position: -99.99% 0;}