Greyscale Hover Effect

This is a nice hover effect you can use for your images. It is pretty simple. You have to create a div class to use for your image. I am going to call it imggreyscale. Now you have to add it to your style.css and customize it as below (you can change the greyscale values as well as time values):

.imggreyscale{
overflow:hidden;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-webkit-filter: grayscale(20%);
}

.imggreyscale:hover{
-webkit-filter: grayscale(100%);
}

The first line of codes are the duration of your transition. You can change the time depending on how fast you want your image to transform to greyscale. I will keep mine to 1s. I want my image to have a little grescale on it so I will set it to 20% and when I hover it I want it to go full greyscale so I will set the value to 100%. Now you have to add the div class to your image code:

<img src=”URL HERE” class=”imggreyscale” />

And that’s all. Here is how mine looks out: