Berbagai Macam Efek Transisi Pada Gambar

Kode Iklan Di Sini
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.


Inilah Contoh Gambar Efek Transisi

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


Inilah Contoh Gambar Efek Transisi

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

.


Inilah Contoh Gambar Efek Transisi

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


Inilah Contoh Gambar Efek Transisi

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


Inilah Contoh Gambar Efek Transisi

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


Inilah Contoh Gambar Efek Transisi

.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 :)

You Might Also Like:

Disqus Comments