Inverted Image Hover


Assalamualaikum . Alhamdulillah. Hari ni dapat jugak buat tuto.
Setelah berhempas pulas mencuba akhirnya dapat jugak.
Ok, untuk image hover kali ni. Bila korang sentuh image, image tu jadi terbalik.
Cuba hoverkan cursor anda kepad gambar di ats ye . Sentuh lama-lama sikit.
Selalunya effect ni ada kat blogskin, tapi Yura buatkan effect ni khas untuk yang tak guna blogskin tu ^^
  • 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 
a img {
position: relative; 
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear; 
border-radius: 10px;
}
 img:hover {
-moz-transform: scale(-1) translateX(0px);
 -webkit-transform: scale(-1) translateX(0px); 
-o-transform: scale(-1) translateX(0px);
 -ms-transform: scale(-1) translateX(0px); 
transform: scale(-1) translateX(0px); z-index:2; 
opacity: 1.0 !important; 
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
transition: all 0.4s linear;
}
  • 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 :)

3 comments

Awak mehla komen? satu komen pun jadilah :')