StarWars.com roll overs w/ CSS transitions

by Nate Balcom

HTML

<div><p>Explore new realms <span>Explore new realms</span></p></div>
<div><p>Discover worlds <span>Discover worlds</span></p></div>

CSS

p {
      font-family: sans-serif;
      font-size: 20px;
      position: relative;
      margin-bottom: 0.5em;
      display: inline-block;
      clear: both;
    }

    p span {
      overflow: hidden;
      position: absolute;
      left: 0;
      top: 0;
      display: block;
      width: 0px;
      -webkit-transition: width 0.5s;
         -moz-transition: width 0.5s;
           -o-transition: width 0.5s;
      background: blue;
      color: white;
      white-space: pre;
    }

    p:hover span {
      width: 100%;
    }