How to Apply Grey Saturation First, then Add Color on Hover in Divi

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%);
}

Logan Ramirez

Native Texas, Logan Seth Ramirez is a computer science graduate from Trinity University and lives in San Antonio with his wife and four children. Along with being a web hero, he authored The Groom Wore White Socks, sings and songwrites as Logan Seth, and his favorite Spanish word is cacahuates.