Saturday 20 April 2013

Tutorial : Image Hover 4 (Grey)





Assalamualaikum . Image hover kali ni pula gambar akan jadi warna kelabu bila cursor sentuh gambar . Okay faham ? Jom mulakan pembelajaran kita :D 

1. Dashboard > Template
2. Press F3 dan cari code </style>
3. Copy code dibawah 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 yang korang cari tadi
5. Preview dan save . 
Credit :  Cnuwifue

0 comments: