Cara membuat efek bergoyang pada gambar

Cara membuat Efek Bergoyang pada gambar - Efek ini akan bekerja pada saat pengunjung melakukan mouse over atau melakukan hover baik itu terhadap gambar yang memiliki anchor link maupun gambar yang tidak memilikinya.
Efek shake yang membuat gambar blog anda bergoyang ini akan bekerja pada semua browser seperti Internet Explorer, Firefox, Chrome, Safari, Opera bahkan saya telah mencoba melakukan hover pada browser di perangkat Android dan efek inipun bekerja sangat mulus tanpa ada kendala...
Keren kan sob,.??? Untuk melihat DEMO nya silahkan arah kan cursor sobat ke gambar dibawah ini.

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan CTRL+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan kode CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

.entry-content img { 
transition-duration:0.5s; 
transition-timing-function: ease; 
transition-delay:0s; 
-moz-transition-duration:0.5s; 
-moz-transition-timing-function:ease; 
-moz-transition-delay:0s;  
-webkit-transition-duration:0.5s; 
-webkit-transition-timing-function:ease; 
-webkit-transition-delay:0s; 
-o-transition-duration:0.5s; 
-o-transition-timing-function:ease; 
-o-transition-delay:0s; 
} 
.entry-content img:hover { 
animation-name: goyang; 
animation-duration: 0.8s; 
transform-origin:50% 50%; 
animation-iteration-count: infinite; 
animation-timing-function: linear; 
-moz-animation-name: goyang; 
-moz-animation-duration: 0.8s; 
-moz-transform-origin:50% 50%; 
-moz-animation-iteration-count: infinite; 
-moz-animation-timing-function: linear; 
-webkit-animation-name: goyang; 
-webkit-animation-duration: 0.8s; 
-webkit-transform-origin:50% 50%; 
-webkit-animation-iteration-count: infinite; 
-webkit-animation-timing-function: linear; 
} 
@keyframes goyang{ 
0% { transform: translate(2px, 1px) rotate(0deg); } 
10% { transform: translate(-1px, -2px) rotate(-1deg); } 
20% { transform: translate(-3px, 0px) rotate(1deg); } 
30% { transform: translate(0px, 2px) rotate(0deg); } 
40% { transform: translate(1px, -1px) rotate(1deg); } 
50% { transform: translate(-1px, 2px) rotate(-1deg); } 
60% { transform: translate(-3px, 1px) rotate(0deg); } 
70% { transform: translate(2px, 1px) rotate(-1deg); } 
80% { transform: translate(-1px, -1px) rotate(1deg); } 
90% { transform: translate(2px, 2px) rotate(0deg); } 
100% { transform: translate(1px, -2px) rotate(-1deg); } 
} 
@-moz-keyframes goyang{ 
0% { -moz-transform: translate(2px, 1px) rotate(0deg); } 
10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); } 
20% { -moz-transform: translate(-3px, 0px) rotate(1deg); } 
30% { -moz-transform: translate(0px, 2px) rotate(0deg); } 
40% { -moz-transform: translate(1px, -1px) rotate(1deg); } 
50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); } 
60% { -moz-transform: translate(-3px, 1px) rotate(0deg); } 
70% { -moz-transform: translate(2px, 1px) rotate(-1deg); } 
80% { -moz-transform: translate(-1px, -1px) rotate(1deg); } 
90% { -moz-transform: translate(2px, 2px) rotate(0deg); } 
100% { -moz-transform: translate(1px, -2px) rotate(-1deg); } 
} 
@-webkit-keyframes goyang{ 
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); } 
}

5) Kemudian simpan template sobat

Sekarang coba lihat salah satu posting blog yang terdapat gambar atau foto maka efek bergoyang pun akan mengiringinya pada saat anda melakukan hover. Enjoy & Happy Blogging!