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