Shocking Image Hover


Try touch me ~
Assalamualaikum semua.
Hari ni dah hari Rabu huwahhhh, ahad ni balik asrama :'(

Ok harini nak share tuto lain pulak. Tak perlu cerita banyak , cuba sentuh gambar kat atas. Yes,great.
Itu lah tuto hari ni. Hehe..

Ok lets start!

  • Dashboard > Template > Edit Html > Click icon yang mcm ►> Ctrl+F  (Pastikan anda click dlm box html dulu sebelum tekan Ctrl+F ) > masukkan code dibawah dan ENTER
a:visited {

  • Copy (Ctrl + C) code di bawah 
@-moz-keyframes pou {
0% {transform: rotate(0deg) scale(1) ; -webkit-transform: rotate(0deg) scale(1) ; -moz-transform: rotate(0deg) scale(1) ; -o-transform: rotate(0deg) scale(1) ; -ms-transform: rotate(0deg) scale(1) ;}

12% {transform: rotate(10deg) scale(0.9); -webkit-transform: rotate(10deg) scale(0.9) ; -moz-transform: rotate(10deg) scale(0.9) ; -o-transform: rotate(10deg) scale(0.9) ; -ms-transform: rotate(10deg) scale(0.9) ;}

25% {transform: rotate(-10deg) scale(0.4) ; -webkit-transform: rotate(-10deg) scale(0.4); -moz-transform: rotate(-10deg) scale(0.4) ; -o-transform: rotate(-10deg) scale(0.4) ; -ms-transform: rotate(-10deg) scale(0.4) ;}

50% {transform: rotate(0deg) scale(1) ; -webkit-transform: rotate(0deg) scale(1) ; -moz-transform: rotate(0deg) scale(1) ; -o-transform: rotate(0deg) scale(1) ; -ms-transform: rotate(0deg) scale(1) ;}

25% {transform: rotate(-10deg) scale(1.4) ; -webkit-transform: rotate(-10deg) scale(1.4); -moz-transform: rotate(-10deg) scale(1.4) ; -o-transform: rotate(-10deg) scale(1.4) ; -ms-transform: rotate(-10deg) scale(1.4) ;}

87% {transform: rotate(10deg) scale(1.4); -webkit-transform: rotate(10deg) scale(1.4) ; -moz-transform: rotate(10deg) scale(1.4) ; -o-transform: rotate(10deg) scale(1.4) ; -ms-transform: rotate(10deg) scale(1.4) ;}

100% {transform: rotate(0deg) scale(1) ; -webkit-transform: rotate(0deg) scale(1) ; -moz-transform: rotate(0deg) scale(1) ; -o-transform: rotate(0deg) scale(1) ; -ms-transform: rotate(0deg) scale(1) ;}

}

@-webkit-keyframes pou {
0% {transform: rotate(0deg) scale(1) ; -webkit-transform: rotate(0deg) scale(1) ; -moz-transform: rotate(0deg) scale(1) ; -o-transform: rotate(0deg) scale(1) ; -ms-transform: rotate(0deg) scale(1) ;}

12% {transform: rotate(10deg) scale(0.9); -webkit-transform: rotate(10deg) scale(0.9) ; -moz-transform: rotate(10deg) scale(0.9) ; -o-transform: rotate(10deg) scale(0.9) ; -ms-transform: rotate(10deg) scale(0.9) ;}

25% {transform: rotate(-10deg) scale(0.4) ; -webkit-transform: rotate(-10deg) scale(0.4); -moz-transform: rotate(-10deg) scale(0.4) ; -o-transform: rotate(-10deg) scale(0.4) ; -ms-transform: rotate(-10deg) scale(0.4) ;}

50% {transform: rotate(0deg) scale(1) ; -webkit-transform: rotate(0deg) scale(1) ; -moz-transform: rotate(0deg) scale(1) ; -o-transform: rotate(0deg) scale(1) ; -ms-transform: rotate(0deg) scale(1) ;}

25% {transform: rotate(-10deg) scale(1.4) ; -webkit-transform: rotate(-10deg) scale(1.4); -moz-transform: rotate(-10deg) scale(1.4) ; -o-transform: rotate(-10deg) scale(1.4) ; -ms-transform: rotate(-10deg) scale(1.4) ;}

87% {transform: rotate(10deg) scale(1.4); -webkit-transform: rotate(10deg) scale(1.4) ; -moz-transform: rotate(10deg) scale(1.4) ; -o-transform: rotate(10deg) scale(1.4) ; -ms-transform: rotate(10deg) scale(1.4) ;}

100% {transform: rotate(0deg) scale(1) ; -webkit-transform: rotate(0deg) scale(1) ; -moz-transform: rotate(0deg) scale(1) ; -o-transform: rotate(0deg) scale(1) ; -ms-transform: rotate(0deg) scale(1) ;}

}
a img {
-webkit-transition: .9s;-moz-transition: .9s;
}
 img:hover {
-webkit-animation: pou .9s alternate ease;-moz-animation: pou .9s alternate ease;}
}
  • Paste kan (Ctlr+V) code atas tadi di ATAS code yang a:visited { tadi
  • Dan preview. Kalau tak jadi apa2 dan takde ERROR boleh lah SAVE !
  • Kalau jadi atau tak jadi bagi tau ye, mungkin Yura boleh perbaiki code yang salah :)

2 comments

Awak mehla komen? satu komen pun jadilah :')