Wednesday, December 05, 2012

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 :)


7 comments:

hatiAMIRA said...

selain warna grey,,warna lain ada tak ?

Mas Erma Azni said...

@hatiAMIRA Takde lagi la syg, nanti mas try search tgk k? ;)

farhan irfan said...

THANK YOU ! PAAN GUNA .. THANKS ^^

farhan irfan said...

Akk paan dah creditkn tutor akk dlm tutor blog paan sbb ad org request ,,
hehe thanks k mintak izin

Mas Erma Azni said...

@farhan irfan Oke paan :)

Nuradlin Khairina said...

thank you

Hello Kitty said...

@Nuradlin Khairina ur welcome~