text hover background slide animation

by John Doe

HTML

<div><p>Hover over me<span>Hover over me</span></p></div>

CSS

p {
      font-family: sans-serif;
      font-size: 20px;
      position: relative;
      display: inline-block;
      clear: both;
    color:#4679BD;
    margin:0 auto;
    }

    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: #4679BD;
      color: white;
      white-space: pre;
    }

    p:hover span {
      width: 100%;
    }