Beberapa Efek Transisi Pada Gambar

BlackHat - Hallo sobat apa kabarnih,,?? di tahun 2012 ini saya akan share Beberapa Eefek Transisi Pada Gambar. Trik kali ini bisa digunakan untuk membuat efek pada semua gambar di blog kita,langsung saja lah gak usah mundar mandir lagi cekendol,,

Nih ane kasih beberapa efeknya :

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 done ^_^

Related Post/Artikel Terkait