Tutorial Blogskin : Grey Image Hover . | I N F I N I T E

HOME OWNER TUTORIAL ARTWORK BLOGSKIN ASK.FM

Tutorial Blogskin : Grey Image Hover .



Large
Assalamualaikum :)

Arrien nak buat tuto lagi..kali nie image menjadi warna grey apabila disentuh..nak cuba?? ikowt tuto nie ->

1. Dashboard > Template.
2.Tekan Ctrl+F dan cari code </style>
3.Dah jumpa?? good.. kemudian copy code bawah nie pulak.


/*------ 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. Pastekan di atas code tadi. 
5.Preview dan save.

Good luck :) Wassalam.

Tiada ulasan:

 
Copyright © .2011-2017. Inspired by Kio.All Right Reserved by Arrien Amani