Tutorial : Image Hover Part7 (Blogskin)

Tumblr_m45b6a21vu1ru9z9co1_500_large

Assalamualaikum and annyeonghaseyo. Tutor yang seterus. Image hover ni. Bila korang halakan cursor nanti dia akan bertukar jadi warna grey. Faham?

1. Dashboard > Template 
2. Tekan Ctrl + f serentak dan cari code </style>
3. 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;}
4. Paste di atas code </style> tadi
5. Preview & save.
Credit : Cnuwifue

2 comment [s]:

Unknown said...

saya buat tak menjadi laa , knp ye ?

atiqahjaidin said...

@Dhiaa saja Tak jadi eh? erm cuba lagi. check semula code tu.