Zoom Efect's

 Blog gue dulu emang ngak sebagus ini sich dulunya, tetapi dengan selalu mencoba blog gue akhirnya seperti ini udah mulai bagus dan sering dilirik para usernya yes!
,Wah mulai lagi nich membahas yang tidak jelas oke langsung aja dech gue jelasin mengenai tutor hari ini tutor hari ini beda dengan tutor yang kemarin yang mengenai Cara membuat Tab View Yang Unik
Pada kali ini saya akan menjelaskan mengenai Cara Membuat efek Zoom Pada gambar atau image , oke kalo pada bingung langsung liatin aja tutornya dech nich tutornya :


Cara Membuat Zoom Effect pada Gambar di Blog
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Cari kode ]]></b:skin> lalu taruh kode berikut ini di bawahnya:


.ow img{

-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 10px 5px 0;
}

.ow img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}

5. Simpan Template jika sudah selesai.
6. Untuk menerapkan Zoom Effect ini kita harus menambahkan tag class="ow" pada kode HTML gambar, contohnya seperti ini:

<a class="ow" href="http://twitter.com/kurniasepta" ><img border="0" height="177" src="Diisi dengan URL gambar anda - Cobasanasini" width="284" /></a>
Note :
 Tutorial ini tidak dilengkapi dengan contoh jadi kalo berhasil jangan sungkn sungkan untuk komentari artikel ini , salam bloger cobasanasini

Sumber : http://ahmadrijal-blog.blogspot.com/2012/10/zoom-efects.html

1 Coment :