My imagination are strong enough for me to hold on.
Hello 2017

#Tutorial : Image hover grayscale
Saturday 19 December 2015 @ 07:38



Preview


Bonjour!!!
I'm going to show you guys how to make image become grayscale when hover it



1.Open your blog template, change to Edit Html
2.Press Ctrl+F (Command+F for Mac user)
3.Find </style>
4.Put this code before </style>
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;}
5.Click save,done!!

Labels: