Monday, October 15, 2012

Tutorial : Image Hover Stlye 3

[LIVE PREVIEW]
Hyeee!! wah dah lame atin tak buat tutorial ni .. aishh mana idaknye atin nak SPM dah taun ni .. tu tak dapat nak update . Jadi atin nak buat tutorial ni sebelum atin nak focus SPM ni . Ok . 
Untuk tutorial ni , image wana kelabu,  nanti bila sentuih akan jadi berwarna .. Faham x? hmm faham kot . sbb tuto ni baru punye .. Ok dah fahan Jom tgk caranya
For Blogskin

 Dashboard > Template > Edit HTML
 Tekan ctrl + f serentak dan cari code </style>
 Copy code 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 code di atas  </style>
 Preview and save.
For Design

 Dashboard > Design > Edit HTML > Tick Expand Widget Templates
 Press Ctrl + f serentak. cari code ni  /* Header
 Copy code 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 dekat atas code /* Header
 Preview and save.

3 comments:

Mrs. Sarah said...

akak..yg blogskin tu cari code mane???akak xtulis pun =="

Atin Tory said...

@Mrs. Sarah : haha mian2 --' .. x perasan pulak akak huhu...OK dah

cci said...

nice blog dia..omey sangat.. ^_^