Tutobies section by NF


THE OWNER


WeChat


Image Hover (part 8)
Saturday, November 24, 2012 • 10:26 PM • 0 comment{s}
Live preview


Assalamualaikum.

Today i'm very boring. Hoooyeahhhh -_- bile korang hover gmbar, dye jadi makin dekat ann? So i will teach you this tutorial ^^ let's 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 solid #ddd;
padding:3px;
-webkit-transition: 1s;
}

img:hover {
width:400px;
opacity:0.85;
overflow:hidden;
transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transform: scale(1.5);
-webkit-transform: scale(1.5);
-moz-transform: scale (1.5);
-o-transform: scale (1.5);
-webkit-transition: 1s;
}

p/s : width tu jangan lupe ubah. suke hati korang nak ubah brape2 pun. 

Kod nie separuh saya tweak and dapat dari pak cik google. Thanks :3 if you wanna share this tutorial, ask me first and don't forget to credit me if you using this tutorial. Thank you.