How to Create a Grayscale to Color Logo Hover Effect in Divi

by | Jul 30, 2018 | Divi Tutorial | 10 comments

In this tutorial, I walk you through how to create a little effect where your logos (or whatever you choose to apply this on) go from grayscale to full color on hover. I’ve used this trick on several sites and it’s very handy when displaying logos for pages like partners, clients we’ve worked it, our friends, etc.

Enjoy and I hope this is a handy little snippet for your Divi toolbox!

Here’s the CSS:


.friend-logo {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	opacity: .6;
	-webkit-transition: .6s;
	-moz-transition: .6s;
	transition: .6s;
}

.friend-logo:hover {
	filter: grayscale(0%);
	opacity: 1;
	margin-top: -5px;
	box-shadow: 0px 18px 22px -15px rgba(0,0,0,0.3);
}