Tutobies section by NF


THE OWNER


WeChat


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


This is the live preview.

Assalamualaikum.

Hari ni saya nak ajar korang simple image hover. Saya tau tutorial nie ramai yg dah buat, tp saya sengaja nak buat. LOL. Cuba korang hover gambar kat atas tu? Dye macam kabur *apa tah* kan? So kalau korang nak tau cemane, 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: 100;
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: .50;
filter: alpha(opacity=100);
-o-transition: opacity .1s linear;
-webkit-transition: opacity .1s linear;
-moz-transition: opacity 1.5s linear;
-webkit-transition: 1s;
}

Kalau dah siap, jangan lupe save. Kalau korang nak share tutorial nie, bagitau dulu and jangan lupa kredit kalau korang gune tuto nie. Bye!