Tutorial : Image Hover Effect 5

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 ;

Better Live Preview Here

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/