Tutobies section by NF


THE OWNER


WeChat


Image hover (part 6)
Saturday, November 24, 2012 • 8:50 PM • 0 comment{s}


This is the live preview.

Assalamualaikum.

Akhirnye, dapat jugak cari tutorial neh. Thanks to pak cik google, penat saya cari tau :D Haha, eh apa yang aku melalut ni. K, cuba korang hover gambar kat atas tu, jadi lain kan? Hari ni saya nak ajar image hover yg best punye *best ke?* 8) Jom start.


Classic Template

  • Dashboard > Template.
  • Ctrl+F, cari kod img { atau sama jenis dengannya.
  • Kalau dah jumpa kod tersebut, sila padam kod img { lama anda dan gantikan kod di bawah.
  • Paste kat atas </style>.
Template Designer

  • Dashboard > Template > Edit HTML > Proceed.
  • Ctrl+F, cari kod img { atau sama jenis dengannya.
  • Kalau dah jumpa kod tersebut, sila padam kod img { lama anda dan gantikan kod di bawah.
  • Paste kat atas /* Header
img {
border: 0px;
opacity: .50;
filter: alpha(opacity=100);
-o- transition: opacity 1.5s linear;
-webkit-transition: opacity 1.5s linear;
-moz-transition: opacity 1.5s linear;
-webkit-transition: 1s;
}

img:hover {
opacity: 100;
filter: alpha(opacity=100);
-o- transition: opacity .1s linear;
-webkit-transition: opacity .1s linear;
-moz-transition: opacity 1.5s linear;
-webkit-transition: 1s;
} 

Jangan lupe save! Haha. Btw macam biasa nak share tuto nie bagitau dulu and don't forget to credit me if you using this tutorial. Thank you :)