Beberapa Tutorial Efek Transisi Pada Gambar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by mukhammad nur Selasa, 25 Februari 2014 0 komentar
Beberapa Tutorial Efek Transisi Pada Gambar. Cara Trik kali ini bisa digunakan untuk membuat efek pada semua gambar di blog kita,langsung saja sob :

Sample Efek Bumping :



Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


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

Sample Efek Fade Out :


Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


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

Sample Efek Fade In :


Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


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

Sample Efek Rotasi :


Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


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

Sample Efek Hover Zoom :


Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


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

Sample Zoom Out :


Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


.post img{
-moz-transition: all 0.65s ease-in-out;-webkit-transition: all 0.65s ease-in-out;
}
.post img:hover{
-o-transform: scale(0.6);
-webkit-transform: scale(0.6);
}

Sample Miring Kekanan :


Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


.post img{
-moz-transition: all 0.65s ease-in-out;-webkit-transition: all 0.65s ease-in-out;
}
.post img:hover{transform:rotate(4deg); -moz-transform:rotate(4deg); -webkit-transform:rotate(4deg); -o-transform:rotate(4deg);
}

Sample Miring Kekiri :


Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


.post img{
-moz-transition: all 0.65s ease-in-out;-webkit-transition: all 0.65s ease-in-out;
}
.post img:hover{transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg);
}

Sample Efek Skew :


Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


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

Sample Gambar kekanan :


Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


.post img{
-moz-transition: all 0.65s ease-in-out;-webkit-transition: all 0.65s ease-in-out;
}
.post img:hover{
-moz-transform:translate(5em, 0pt);-webkit-transform:translate(5em, 0pt);
}

Sample Gambar Memutar :


Beberapa Tutorial Efek Transisi Pada Gambar

Berikut Kodenya :


.post img{
border: 3px solid #D8D8D8;
border-style:double;
margin:10px auto;
text-align:center;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
-ms-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
padding-top:5;
padding-left:5;
padding-bottom:5;
padding-right:5;
}
.post img:hover{
-webkit-transform:rotate(720deg) scale(2,2);
-moz-transform:rotate(720deg) scale(2,2);
-o-transform:rotate(720deg) scale(2,2);
-ms-transform:rotate(720deg) scale(2,2);
transform:rotate(720deg) scale(2,2);    
}

Untuk memasang efek ini di blog sobat sangatlah gampang berikut caranya :

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 dan sip dong.

Cukup mudah dong sob. Bila ada yang salah pada artikel diatas maka segera anda tulis di kotak komentar di bawah ! terimakasih atas perhatiannya.
Demikian ulasan seputar Beberapa Tutorial Efek Transisi Pada Gambar
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Beberapa Tutorial Efek Transisi Pada Gambar
Ditulis oleh mukhammad nur
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://cintafido.blogspot.com/2014/02/beberapa-tutorial-efek-transisi-pada.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

Posting Komentar

Panduan blog dan SEO support Online Skill - Cinta fido Fido | Kopi kanan Akherat | Kisah Nabi Muhammad | Sahabat | Belajar Blogger | Template | HTML | Tutorial | Komputer.

investasi semoga anda senang

kurs mata uang BCA-2


Selamat datang di blog cinta fido, semoga anda diberi keSehatan oleh alloh SWT

Islam itu Cinta Damai Agama Islam Cinta Damai
jihad Damai adalah amal kebaikan yang Allah perintahkan dan menjadi sebab kokoh dan kemuliaan umat islam