Tutorial : Image Hover Effect 4

Assalamualaikum & Salam Sejahtera

Haritu ada orang request tutorial image hover effect macam yang aku tengah pakai sekarang . masa tu takde kesempatan lagi nak buat . so aku hold dulu . hari ni baru dapat buat . actually , aku dah tak pakai image hover tu . tapi takpe , still boleh ajar macam mana nak buat . thanks Aqila Farah sebab sudi request tutor :)

LIVE PREVIEW

For Classic Template :

Dashboard > Template 

Copy and Paste code bawah ni dekat ATAS </style>

img {
border:1px solid #e6e6e6;
padding:10px;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
}
img:hover {
opacity:0;
-moz-transform: scale(0.3);
-webkit-transform: scale(0.3);
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
}

Save and Preview .


For Template Designer :

Dashboard > Template > Edit HTML

Copy and Paste code bawah ni dekat ATAS ]]></b:skin>

img {
border:1px solid #e6e6e6;
padding:10px;
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
}
img:hover {
opacity:0;
-moz-transform: scale(0.3);
-webkit-transform: scale(0.3);
-moz-transition: 0.5s;
-webkit-transition: 0.5s;
}

Save and Preview

Okay siap . amacam , okay tak image hover gitu ? haha . akan datang cuba nak buat image hover lain dulu .  kbai o/