Kumpulan Efek Transisi Pada Gambar - Sesuai dengan judul diatas, kali ini darmasite akan mengulas beberapa CSS efek transisi pada gambar di blogger sobat, untuk itu silahkan lihat beberapa css dibawah ini :



1. 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);
}
2. 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;
}
3. 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;
}
4. 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);
}
5. 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);
}
6. 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);
}
Cara Pasang :
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 ^_^

Posting Komentar

  1. efeknya keren2 sob,, coba dulu nih

    BalasHapus
  2. @Ayriy Zone :
    Silahkan sob, btw makasih atas komentarnya

    BalasHapus
  3. Aseeekkk....!! Ini bisa nambah ilmu CSS ane. (^_^)

    BalasHapus
  4. bagus gan.. tapi lebih bagus lagi di beri contoh :)
    just saran

    BalasHapus
  5. @ILHAM BLOG :
    ok sob, monggo dicoba.

    Radionan Online :
    makin mju sob,,

    Black IT :
    wah, saran yg bagus, makasih atas suportnya

    BalasHapus
  6. keren ini mas
    bisa dicoba :D
    tapi kurang screenshotnya, jadi harus nyoba satu2

    www.slovech.us

    BalasHapus
  7. @SLOVECH :
    Terimakasih atas komentarya! Screenshot mungkin bisa saya sisipkan secepatnya

    BalasHapus
  8. entah ini browser saya atau gimana, kyknya kok itu demo efek transisinya sama semua ya :D

    BalasHapus
  9. mas ni efek buat apa ya tolong dikasih ganbar nya dong contoh efek yang udah jadi.

    BalasHapus
  10. Nggih, tyang nak bali niki :salaman

    @arim bawa

    BalasHapus

Catatan:
1. Komentar Anomin telah kami buka, silahkan berkomentar yang sopan
2. Jika kurang mengerti dengan posting di atas silahkan ajukan pertanyaan
3. Kami usahakan membalas komentar anda secepat kilat!
4. Masalah "Link Rusak" bisa anda laporkan lewat komentar
5. Jika meninggalkan Link Aktif pada komentar terpaksa kami hapus

Salam Admin
Darma Jaya

 
Top