Hafiz Zulkafly

Tutorial : Image Hover Effect 2

Friday, December 07, 2012


Assalamualaikum

Hari ni rasa macam nak bagi tutorial image hover effect . Aku belajar dekat satu laman web ni . lupa apa laman web dia . macam macam effect korang boleh buat . so kalau nak guna , sila lah komen , kredit ? terpulang .

LIVE PREVIEW HERE


For Template Designer User :

Dashboard > Template > Edit HTML . Ctrl + F perkataan ni ]]></b:skin> . Jumpa ? PASTE code bawah ni dekat ATAS code yang korang dah cari tadi .


img {
border:5px solid #fff;
box-shadow:0px 0px 2px #333;
-moz-transition:1500ms;
-webkit-transition:1500ms;
}
img:hover {
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-webkit-transition:1500ms;
-moz-transition:1500ms;
}

Save and Siap .

For Classic Template User :

Dashboard > Template . Ctrl + F perkataan ni </style> . Kemudian paste code dekat bawah ni dekat ATAS code yang korang cari tadi .


img {
border:5px solid #fff;
box-shadow:0px 0px 2px #333;
-moz-transition:1500ms;
-webkit-transition:1500ms;
}
img:hover {
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-webkit-transition:1500ms;
-moz-transition:1500ms;
}

Save and Siap .

Mudah je kan . amacam . awesome tak hover effect tu ? hehehe . actually ada banyak lagi yang lain . akan update dari masa ke semasa . kbai o/

5 comments

© 2017 HAFIZ ZULKAFLY ALL RIGHTS RESERVED