In a recent post I showed how to Add Grayscalee (NOTE – works in Chrome only right now) and was asked how to do the opposite.

So, in this post I’ll show how to do that and post the CSS below.

It revolves around using webkit-filters so not all browsers support it, but most folks will probably use Chrome (no idea…just saying that…) so enjoy!

Here is the video:

 

Below is the code used:

.new-img img {
 -o-transition:.5s;
 -ms-transition:.5s;
 -moz-transition:.5s;
 -webkit-transition:.5s;
 transition:.5s;
 -webkit-filter: grayscale(100%);
}
.new-img img:hover
{
 -ms-transform: translate(0,-10px);
 -webkit-transform: translate(0,-10px);
 transform: translate(0,-10px);
 -webkit-filter: grayscale(0%);
}