tutorial :image hover (kelabu)

PREVIEW //

preview here

Assalamualaikum and good morning, evening , night and etc

hari ni hati rasa nak buat tutor image hover yang biler kita lalukan cursor dia

akan bertukar menjadi kelabu ,, okay dulu paan guna, But now dah tukar hover image rainboow

okaylha di request oleh someone ,, and ada jugak yang tanya

benda nie okaylaa terus jelah kita buat :D 

okayy

pengguna template designer

• dashboard -> template->edit html 'and then 'Proceed'
• tick expand widget
• okay cari kod ini  ]]></b:skin>

/*------ IMAGE ANIMATION------*/ img, a img { filter: none;-webkit-filter: grayscale(0);} .photo img { opacity:1; -webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;} img:hover, a:hover img {filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */ -webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out;}

 pengguna classic template

• dashboard ->template
• tekan F3 / ctrl + f and then cari kod  </style>
• pastekan code di bawah ini diatas code </style>

/*------ IMAGE ANIMATION------*/ img, a img { filter: none;-webkit-filter: grayscale(0);} .photo img { opacity:1; -webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;} img:hover, a:hover img {filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */ -webkit-transition:all 0.4s ease-in-out; -moz-transition:all 0.4s ease-in-out; -o-transition:all 0.4s ease-in-out; transition:all 0.4s ease-in-out;}

preview or save je :3

CREDIT TO TEAM KAK ERMA ! :3 MOUSTACHE HERE <-