Beberapa Efek Transisi Pada Gambar dengan CSS

Baiklah kali saya akan mencoba memberikan "Beberapa Efek Transisi Pada Gambar". Trik kali ini bisa digunakan untuk membuat efek pada semua gambar di blog kita,langsung saja lah gak usah mundar mandir lagi cekendol,,

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


Gimana bagus gak,,?? gak ya,,?? ya udah jika ada yang mau kasih tambahan silahkan,,..
Semoga tutorial ini membantu Please rate this article: