Membuat Efek Gambar Membesar Saat Dilewati Kursor

Mempercantik blog dengan berbagai gaya dan efek-efek menarik memang sangat mengasyikkan. Dan kali ini akan membahas tentang cara Membuat Efek Gambar Membesar Saat Dilewati Kursor. 

Efek gambar membesar saat dilewati kursor maksudnya di sini yaitu ketika kita meletakkan kursor di atas gambar tersebut, maka gambar atau foto tersebut akan membesar secara otomatis.

Tapi sayang sekali efek gambar membesar ini hanya bisa kita gunakan di Blogspot saja karena scriptnya tidak bekerja di blog yang bermesin WordPress.

Enaknya setelah script ini kita pasang ditemplate kita, selanjutnya kita gak perlu lagi utak-atik template blog kita, melainkan cukup pastekan aja script pemanggilnya di tengah artikel blog yang yang akan kita publikasikan. Jadi kita gak perlu lagi utak atik template blog kita lagi.

Apakah tertarik?

Jika tertarik ingin membuat efek gambar membesar saat di lewati kursor di blog Anda, silahkan ikuti tutorialnya berikut ini.

• Login ke dasbor Blogspot Anda
• Klik menu Template
• Klik Edit HTML ==>> Klik lanjutkan
• Lalu centang Expand Widget Template
• Cari kode ]]></b:skin>
• Copy kode di bawah ini dan pastekan tepat di atas kode di atas

.cayunhover img{
-webkit-transform:scale(0.3); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.3); /*Mozilla scale version*/
-o-transform:scale(0.3); /*Opera scale version*/
-webkit-transition-duration: 9.9s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.cayunhover img:hover{
-webkit-transform:scale(1.2); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.4); /*Mozilla scale version*/
-o-transform:scale(1.1); /*Opera scale version*/
box-shadow:0px 0px 30px blue; /*Kode Css3 untuk efek shadow*/
-webkit-box-shadow:0px 0px 30px blue; /*Untuk safari*/
-moz-box-shadow:0px 0px 30px blue; /*Untuk Mozilla*/
opacity: 1;
}

• Kemudian Save Template.
• Untuk memanggil scriptnya kita cukup memberikan perintah berikut :

<div>
<img src=”ULR GAMBAR KITA“/>
</div>

•  Setelah itu publish artikel Anda dan lihat hasilnya.

Demikian artikel tentang Membuat Efek Gambar Membesar Saat Dilewati Kursor Semoga bermanfaat untuk sobat.