How to Create a Grayscale to Color Logo Hover Effect in Divi
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);
}
Links mentioned in the video:
Where to Put Custom CSS – JoshHall.co
Similar Tutorials:
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
Hello Josh,
Your videos are great. i was wondering are you able to do the same greyscale effect with the header logo in divi or will that require more CSS. And also is it possible to do the greyscale and logo swap effects to the same logo
Yep the effect will work on any element in Divi!
Hello Josh,
Great videos they help a lot.
Got a question. When doing the greyscale and the logoswap effects. Will it be possible to do both effects in the Divi header for the site logo.
Thanks, Aaron! Yep you can apply this effect to ANY element!
Nifty!
I noticed that the CSS you have above is different than what you entered into the video.
Where did the change come in to play? For example, you didn’t enter anything with. “webkit”.
Thanks.
Hey Eric, those are just the extra extensions for cross browser compatibility. Sometimes I add those later in the code so I don’t take up extra time in the video adding those. I explain much more about those extra prefixes in my CSS Course if you want to learn more!
Great tutorial, thanks for sharing us
Much helping this post. thanks foe share.
This is excellent, really easy to implement.
Thank you.