How to invert the color of a logo and create a hover effect using CSS
If you ever encountered websites with press logos, you’ll notice they are neatly aligned next to each other. For my sample Bootstrap website, I created a fake start-up company promoting an app for adopting plush animal cows. One of the fun portions of the website was including the press logos that were inverted from their original colors and have a hover effect.
Here’s what the end result looks like:
If you want to create a similar effect for your website, then keep on reading!
Recreate the look
We’ll start by using the original logo that was used for my Bootstrap website:
Let’s go ahead and add the Mashable logo on our website using the
We’ll want to use a class for this, so go ahead and name it
Next, we’ll go over to our CSS file and add the following code to our
You can adjust the width to your liking, but I chose 15% as I want to keep the logo slightly small and neat on the page. If you want to add multiple logos (like I did with my Bootstrap website), you can simply add in the
margin property to give some spacing in between the logos. Finally, I added the
filter property where I indicated 1 for the invert. This will turn the image white. To make the logo less opaque, I adjusted it to 50%.
For the hover effect, you’ll want to add the
:hover selector when you place your mouse over the logo. Here’s what the code looks like:
transition-duration property with 0.4 seconds allows a nice fade in when being hovered. The
filter property remains the same, except that I adjusted the opacity to 75%.
And there you have it! You’re more than welcome to play around with the values and see which one fits best for your logo needs. If you happen to like this article, feel free to share! You can also follow me on Twitter for more tech and art-related content.