CSS
ul.nudging { margin:10px 10px; padding:0px 0px; font:normal 16px Sans-Serif; } ul.nudging li { list-style:none; margin:0px 0px; padding:0px 0px; } ul.nudging li a { text-decoration:none; display:block; overflow:hidden; padding:5px 10px; color:white; background-image:-webkit-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4)); background-image:-moz-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4)); background-image:-ms-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4)); background-image:-o-linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4)); background-image:linear-gradient(left,transparent,transparent 30%,rgba(255,255,255,0.4)); -webkit-background-size:200% 100%; -moz-background-size:200% 100%; background-size:200% 100%; -webkit-transition:all 0.26s ease-out; -moz-transition:all 0.26s ease-out; -ms-transition:all 0.26s ease-out; -o-transition:all 0.26s ease-out; transition:all 0.26s ease-out; } .nudging li a:hover { background-position:100% 100%; padding-left:15px; }HTML
<ul class="nudging"> <li><a href="#">Lorem</a></li> <li><a href="#">Ipsum</a></li> <li><a href="#">Dolor</a></li> <li><a href="#">Sit Amet-Amet</a></li> <li><a href="#">Jabang Bayi</a></li> <li><a href="#">Oek-Oek</a></li> </ul>