Belajar Membuat Gambar Berubah Saat Di Sorot Cursor

Efek setuhan kursor (penunjuk mouse) pada gambar dalam postingan sangat beraneka ragam. Misalnya apabila penunjuk mouse menyentuh gambar dalam postingan, maka gambar tersebut bisa berganti gambar lain, bisa berubah ukuran (zoom), bisa juga berbutar 360º. Dengan demikian tampilan postingan akan terlihat lebih dinamis dan bervariatif.

Gambar yang Jika Disentuh mouae akan berganti wujud gambar  yang lain.

Untuk dapat melakukan maksud tersebut sibutuhkan sedikitnya 2 (dua) macam gambar. Baiklah langsung saja praktek, agar lebih cepat memahami, dan langkahnya adalah:

[1]. Pertama, LogIn dulu ke BLOG .

[2]. Kemudian dari Dasbor, menuju Post, lalu buat sebuah Postingan Baru.

[3]. Lalu pada Mode Edit HTML pada Postingan, sisipkan Code di bawah ini..

<style type="text/css">
a.pic .image2{display:none}
a.pic:hover .image1 {display:none}
a.pic:hover .image2 {display:inline}
</style>
<center><a class="pic" href="LINK TUJUAN JIKA GAMBAR DIKLIK">
<img class="image1" src="URL GAMBAR 1" />
<img class="image2" src="URL GAMBAR 2" /></a></center>

KETERANGAN :
* Tulisan yg berwarna Biru, ganti dengan URL Tujuan jika Gambar di Klik.
* Dan tulisan yg berwarna Merah, ganti dengan URL Gambar Kalian.
Begini tampilannya jika gambar berikut disentuh penunjuk mouse.

Setiap Gambar yang Ada Pada Blog Akan Berubah Menjadi Besar (Zoom) Disertai Putaran

Dengan teknik berikut ini, setiap gambar yang ada pada blog akan berubah menjadi besar (zoom) disertai putaran secara otomatis. Baiklah ikuti langkah langkah berikut.

1. Pastikah sudah Login ke blogger.
2. Pilih Template,  Klik Edit HTML, kemudian cari kode ]]></b:skin> (gunakan Ctrl F untuk mempermudah pencarian kode).

        3. Setelah ketemu ]]></b:skin>, Copy kode dibawah ini. Lalu Pastekan di Atas ]]></b:skin>.

.post img{-o-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}
.post img:hover{-o-transform:scale(1.9) rotate(360deg) translate(0px);-moz-transform:scale(1.9)
rotate(360deg) translate(0px);-webkit-transform:scale(1.9) rotate(360deg) translate(0px);-o-transition:all 0.5s
ease;-moz-transition:all 0.5s ease;-webkit-transition:all 0.5s ease}


 

      4. Klik Save Template (selesai), lihat hasilnya.

Demikianlah sedikit cara-cara/teknik  Membuat Gambar Berubah Saat Di Sorot Cursor agar blog menjadi lebih cantik dan menarik. Semoga saja yang sedikit ini bermanfaat.

Artikel Terkait