Style Efek Transisi Pada Gambar

Share-Tuts akan share beberapa style efek transisi pada gambar berikut code/scriptnya. silahkan liat dibawah ini sobat.

Efek Bumping

.post img{ -webkit-transition:all .5s ease-out; -moz-transition:all .5s ease-out; -ms-transition:all .5s ease-out; -o-transition:all .5s ease-out; transition:all .5s ease-out; } .post img:hover{ -webkit-transform:translate(0px,10px); -moz-transform:translate(0px,-10px); -ms-transform:translate(0px,-10px); -o-transform:translate(0px,10px); transform:translate(0px,-10px); }

Efek Fade Out

.post img{ -webkit-transition:opacity .5s ease-out; -moz-transition:opacity .5s ease-out; -ms-transition:opacity .5s ease-out; -o-transition:opacity .5s ease-out; transition:opacity .5s ease-out; } .post img:hover{ opacity:0.2; }

Efek Fade In

.post img{ -webkit-transition:opacity .5s ease-out; -moz-transition:opacity .5s ease-out; -ms-transition:opacity .5s ease-out; -o-transition:opacity .5s ease-out; transition:opacity .5s ease-out; opacity:0.2; } .post img:hover{ opacity:1; }

Efek Rotasi

.post img{ -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -ms-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out; } .post img:hover{ -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -ms-transform:rotate(360deg); -o-transform:rotate(360deg); transform:rotate(360deg); }

Efek Membesar

.post img{ -webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -ms-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out; } .post img:hover{ -webkit-transform:scale(2,2); -moz-transform:scale(2,2); -ms-transform:scale(2,2); -o-transform:scale(2,2); transform:scale(2,2); }

Efek Skew

.post img{ -webkit-transition:all .5s ease-out; -moz-transition:all .5s ease-out; -ms-transition:all .5s ease-out; -o-transition:all .5s ease-out; transition:all .5s ease-out; } .post img:hover{ -webkit-transform:skew(30deg,20deg); -moz-transform:skew(30deg,20deg); -ms-transform:skew(30deg,20deg); -o-transform:skew(30deg,20deg); transform:skew(30deg,20deg); }

Untuk memasang efek ini di blog sobat sangatlah gampang berikut caranya :

1. Masuk Dasboard >> Template >> Edit HTML
2. Cari kode ]]></b:skin> Untuk lebih mudah dalam pencarian tekan ctrl+F
3. Letakan salah satu kode CSS efek transisi di atas kode no 2
4. save and selesai.

Itulah beberapa Style Efek Transisi pada Gambar yang Share-Tuts bagikan pada sobat semua. Selamat mencoba sobat

Source : http://blogcunayz.blogspot.com

Anda sedang membaca artikel tentang Style Efek Transisi Pada Gambar dan anda bisa menemukan artikel Style Efek Transisi Pada Gambar ini dengan url http://share-tuts.blogspot.com/2012/10/style-efek-transisi-pada-gambar.html. Anda boleh menyebarluaskan atau mengcopy artikel Style Efek Transisi Pada Gambar ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.

Ingin mempromosikan Blog, Produk, Bisnis, Jualan atau lainnya ? Sobat bisa memasangnya diBlog ini. Tunggu apa lagi mumpung masih ada slot untuk sobat. Silahkan hubungi ane dengan meng-Klik Disini

Related Posts :