Hafiz Zulkafly

Tutorial : Image Hover Effect 5

Tuesday, April 23, 2013

Assalamualaikum

Semalam dapat another request . Dia tanya macam mana nak buat hover macam dekat bahagian disclaimer aku tu . Thanks to are-qil sebab request tutor , maka ber-update jugak lah blog buruk saya ni . hahaha . sebelum tu , meh kita tengok live preview nya dahulu ;







1) For Classic Template , paste this code ABOVE </style>


img {
margin-top:-5px;
border:1px dashed #6d6d6d;
padding:3px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
img:hover {
opacity:0;
-moz-transform: rotate(360deg)scale(0.3);
-webkit-transform: rotate(360deg)scale(0.3);
}

Save .


2) For Template Designer , go to Template > Edit HTML > Paste ABOVE this code ]]></b:skin>


img {
margin-top:-5px;
border:1px dashed #6d6d6d;
padding:3px;
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
img:hover {
opacity:0;
-moz-transform: rotate(360deg)scale(0.3);
-webkit-transform: rotate(360deg)scale(0.3);
}
Save.


* mana mana yang di bold tu boleh ubah ikut citarasa korang . 


Okay siap . mesti jadi punya . kalau tak jadi bagitau la ye . kalau nak guna or jadi , sila sila lah komen jugak . nak re-tutor , inform me first . kbai o/

6 comments

  1. Thanks ye sbb sudi. But, kalau nak buat bulat tuh kene tambah border-radius ek ?

    ReplyDelete
  2. Akak, nak re-tutor. Don't worry, i give you full credits :D. Thanks, Bad Grammar? Sorry. Iam Indonesian XD

    ReplyDelete
    Replies
    1. take it with full credit is allowed with my pleasure :D

      Delete
    2. she used to call abang as a kakak because she's indonesian.
      sound weird isnt? hahaha.
      saya ada ramai kenalan blogger yang panggil saya as kakak.
      hahahaha

      Delete

© 2017 HAFIZ ZULKAFLY ALL RIGHTS RESERVED