Berbagai Macam Efek Transisi Pada Gambar

Berbagai Macam Efek Transisi Pada Gambar , Anaktimor17 Blog - Sobat blogger, ada beberapa efek transisi ini digunakan untuk memberi efek yang cukup keren pada gambar di blogspot. Dibawah ini adalah "Demo" dan kode "Css3" dari gambar yang diberi efek transisi.

Cara Pasang

1. Masuk Dasboard >> Template >> Edit HTML.
2. Cari kode ]]></b:skin>  (Untuk lebih mudah dalam pencarian tekan ctrl+F )
3. Anda pilih salah satu code lalu letakan salah satu kode CSS3 efek transisi di atas kode no 2
4. Klik Save

1. 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);

}

2. 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;

}

3. 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;

}

4. 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);

}

5. 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);

}

6. 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);

}

Selamat mencoba !! Happy blogging :)