Tutorial List With Special Hover

In this post, I would like to teach you on how to get this cute Tutorial list, I specially made this for tutorial list, but you can also use this for any other list with link. Please hover the list below to see he effect.

Tutorial : Navigation Tutorial : Background Tutorial : Cara mengorat kevin dengan mudah Tutorial : Hahahahahahaha Tutorial : Gurau je ehhh XD

Edit the list in http://htmledit.squarefree.com/ and then paste the codes in HTML section in you new page.

<style type="text/css"> a.tutorial-list{ background:url(http://media.tumblr.com/tumblr_m46ludgD2k1qdlkyg.gif); background-repeat:no-repeat; background-size:15px; padding-left:25px; color:#444; margin-bottom:2px; font:12px arial; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; color:#999; display:block; } a.tutorial-list:hover{ background:url(http://media.tumblr.com/tumblr_m46ltvcl341qdlkyg.gif); background-repeat:no-repeat; background-size:15px; } </style> <a class="tutorial-list" href="LINK" >Tutorial : </a> <a class="tutorial-list" href="LINK" >Tutorial : </a> <a class="tutorial-list" href="LINK" >Tutorial : </a> <a class="tutorial-list" href="LINK" >Tutorial : </a> <a class="tutorial-list" href="LINK" >Tutorial : </a>