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.
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
Selamat mencoba !! Happy blogging :)
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 :)
saya tes 1 1 dlu deh biar bisa liat prbandingannya..
thanks tutorny ttg berbagai macam efek transisi pada gambar di blog!
-keep blogging-
#blogwalking
salam blogger ....
.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);
}
http://dailybloggerpro.blogspot.com/