Make Style Hover in Title Post

Trik hover memang tidak ada habisnya untuk dikreasikan. Mungkin para sobat juga memperhatikan ada kejadian aneh jika menyorot disana-sini pada blog aku :P Itulah trick hover sederhana yg aku pasangkan ;)) Coba saja deh kalian cari dengan keyword hover pada kotak pencarian ;)
Sekarang Koben akan berbagi sedikit hover trick diseputaran tagging judul postingan blog kalian! Atribut yg dipakai bisa h1, h2, h3 atau lainnya, yang terpenting nanti kalian bisa memasukan bumbu²nya tidak salah ya :)
Cek gi dot...

Hover here dude!Read more

Kode CSS

#post h1{
padding: 0px;
position: relative;
background: #888;
cursor: pointer;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#post h1:hover{
background: #eee;
}
#post h1:hover span{
background: #888;
color: #FFF;
opacity: 1;
}
#post h1:hover a{
color: #000;
}
#post h1 a{
margin-left: 8px;
color: #FFF;
}
#post h1 span{
float: right;
color: #000;
background: #eee;
opacity: 0;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

Markup HTML

<div id="post">
<h1>
<a>Hover here dude!</a>
<span>Read more</span>
</h1>
</div>

Bonusnya ini ada template bagus sekali

Happy coding \m/