Beberapa Tutorial Efek Transisi Pada Gambar

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 :




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 :



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 :



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 :



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 :



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 :



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 :



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 :



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 :



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 :



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 :



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