Gambar dan Teks Bergerak Dengan Kode CSS

Tips bagaimana gambar atau teks bergerak saat pointer mouse mendekati dan menjauh dengan kode CSS. Seperti terlihat dibawah ini:

Ini adalah text link bergerak

atau gambarnya:

Ingin membuatnya?

Berikut langkah-langkah cara membuatnya.

Login ke Blogger >>

Tab Design/ Rancangan pilih Edit HTML >>

copy paste CSS di bawah ini tepat di atas kode ]]></b:skin>

kode css:
<style>
.gerakan {
-moz-transition: all 0.4s ease-out;
-o-transition: all 0.4s ease-out;
-webkit-transition: all 0.4s ease-out;
-ms-transition: all 0.4s ease-out;
transition: all 0.4s ease-out;
}

.gerakan:hover {
margin-left: 50px;
padding-left: 5px;
}
</style>

Kode HTML untuk effect text link nudging:
<a href="URL link di sini" class="gerakan">Text Link Bergerak</a>

Kode HTML untuk effect image nudging:
<a class="gerakan" href="http://sahabat-klik.blogspot.com/"> <img src="URL Link gambar" border="0" alt="Deskripsi gambar" /> </a>

Ditulis Oleh: KanG piE

Info yang kamu baca adalah Gambar dan Teks Bergerak Dengan Kode CSS dengan harapan bermanfaat untuk kamu. Silahkan kamu copas dan menyebarluaskan seluruh isi artikel ini dengan catatan menyebutkan <a href="http://sahabat-klik.blogspot.com/2012/10/gambar-dan-teks-bergerak-dengan-kode-css.html" target="_blank">Gambar dan Teks Bergerak Dengan Kode CSS</a> sebagai asal sumber Info ini.

Sahabat KLIK