Tutobies section by NF


THE OWNER


WeChat


Image Hover (part 9)
Saturday, December 22, 2012 • 11:47 AM • 0 comment{s}
Live preview

Assalamualaikum and hai.

Dah lame tak update blog tutorial nie haha. Hari nie saya nak ajar tutorial baru ^^ lagipon saya cari tuto nie kat google je :) Okay 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 {
filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
-webkit-transition: .5s;
}

img:hover {
filter: none;
-webkit-filter: none;
-webkit-transition: .5s;
}
Preview and save! Kalau x jadi tu, comment tau. :)