Tutorial|Station

Image Hover Gray Colour

Monday | 3.12.12 | 0 comments

Nak belajar macam mana bila cursor hala ke gambar menjadi warna kelabu gitu. Tutorial nie khas buat anda.

Dashboard > Template
Ctrl + F : Serentak dan cari code </style>
Copy code dekat bawah dan paste kan di atas code </style> tadi.

/*------ 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. Priview & Save

Old things | New things