Tutorial Blog - Berbagai Efek Transisi pada Gambar

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 cekidot,, 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:.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:.2}.post img:hover{opacity:1}

Efek Rotasi :

.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:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}

Efek Membesar :

.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: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 ^_^




Gimana bagus gak,,?? gak ya,,?? Jangan Lupa Komentar ya?,,.. Kalo mau Copas tulis Sumbernya ya sobat, kalo gak ditulis namanya PLAGIAT !

Demo Klik Disini