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
Rizky Wardiansyah
.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
Rizky Wardiansyah
.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
Rizky Wardiansyah
.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
Rizky Wardiansyah
.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
Rizky Wardiansyah
.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
Rizky Wardiansyah
.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 ^_^

Bookmark and Share



Artikel Terkait :)

0 komentar:

Posting Komentar

 

Mengenai Saya

Foto saya

Janganlah Memandang Seseorang Hanya Luarnya Saja Tapi Lihat Dari Dalam Hatinya.

Pengikut

Harbudi Manggala Putra MengucapkanTerima Kasih Atas Kunjungan Anda Di Blog Saya . Maaf Saya Hanya Manusia Biasa Yang Berusaha Untuk Menjadi Yang Terbaik