Tutorial Image Hover Grayscale

Heyo!

Jeles tak tengok gambar dalam blog aku jadi grayscale hover? :p Ekceli, hover ni selalunya blogskin’s user pakai la, temp biasa takda codes lagi kod. Tp jgn risau, aku dah sediakan codes utk temp biasa utk tutorial kalini. “Jadi, gue harus say wow gituh?!” Hahaha. Sinetron indon ptg-ptg jam 6.30pm astro Ria. Mesti akan jumpa dialog tu, hahahaha! Seriously, tutorial ni 50% aku punya codes dan 50% lagi dari blogskin punya codes. Tp, setahu aku, aku tak pernah lagi jumpa tutorial img hover utk temp biasa ni dkt blog mana-mana. So pls credit me if copy dis tutorial okay kiuti? :*

Simple Template

• Dashboard > Template > Edit HTML

• Ctrl + f to find this code : ]]></b:skin>

• Copy code dekat bawah ni dan paste atas ]]></b:skin> tadi.

/*------ 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 dan kalau tadak apa apa error, dgn bahagianya save :)

Blogskin's User

• Dashboard > Template 
• Tekan Ctrl + f serentak dan cari code </style>
• Copy code dekat bawah ni

/*------ 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;}

• Paste di atas code </style> tu.
• Preview & save dgn gembira :)