blog

CARA MEMBUAT EFEK GAMBAR DI BLOG

Hallo sobat apa kabarnih,,?? di tahun 2014 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 ^_^

Gimana bagus gak,,?? gak ya,,?? yaudah jika ada yang mau kasih tambahan silahkan,,..

Ebas

You Might Also Like

0 komentar

instagram