Kumpulan Efek Transisi Pada Gambar

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

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

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 ^_^