Thursday, October 18, 2012

Tutorial : Image Hover Stlye 4



    Oh nampaknye , ade orang mintak sesuatu la huhu .. Ok atin tau maksud die.. die kata , bila cursor menghala kat image atin , ia akan tukar colourfulkan? .. haa , atin faham maksud die. Tapi code tu ade kat seseorang. ahh xpelah atin creditkan tuan yang ajar code tu huhu...


Blogskin./Clasic Template
 Dashboard > Template > Edit HTML
 Tekan ctrl + f serentak dan cari code </style>
 Copy code bawah ni:

img {
filter: hue-rotate(360deg);
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-webkit-filter;(1);
-webkit-transition: all 0.7s linear;
-moz-transition: all 0.7s linear;
transition: all 0.7s linear;
}
img:hover {
filter: hue-rotate(0deg);
-webkit-filter: hue-rotate(0deg);
-moz-filter: hue-rotate(0deg);
-webkit-filter;(0);
}
 Paste code di atas  </style>
 Preview and save.
  
    




Design
 Dashboard > Design > Edit HTML > Tick Expand Widget Templates
 Press Ctrl + f serentak. cari code ni  /* Header
 Copy code bawah ni
img {
filter: hue-rotate(360deg);
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-webkit-filter;(1);
-webkit-transition: all 0.7s linear;
-moz-transition: all 0.7s linear;
transition: all 0.7s linear;
}
img:hover {
filter: hue-rotate(0deg);
-webkit-filter: hue-rotate(0deg);
-moz-filter: hue-rotate(0deg);
-webkit-filter;(0);
}

 Paste dekat atas code /* Header
 Preview and save.



credit : RaRa 


No comments: