PNG image hover change

Support
#1

I have png images that I would like set as links, which isn’t a problem to make an image a link. But is there a way to make that image change colors upon hover. For example, I have logos of clients I’ve worked with, they are in black/white format, I would like the logo to change to the color logo when hovered. How can I do this? with the pro theme?

To give an idea of what I mean, here’s a site that uses what I want to do if you scroll down to their clients list: https://www.cultivatebrands.com/capabilities/

#2

Hi Steffen,

This is possible through custom CSS. First, add a class to the image element then add this code to the Global CSS:

.grayscale {
    transition: filter 0.45s cubic-bezier(0.3, 0.4, 0.1, 1), opacity 0.45s cubic-bezier(0.3, 0.4, 0.1, 1);
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.55;
}

.grayscale:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
    opacity: 1;
}

To apply this style to other images, just add the class grayscale to other images.

Hope this helps.

Change color on image hoover and add text
#3

Thank you! I’ll try this out

#4

You’re most welcome!

#5

This worked great! Thanks again!

#6

You’re welcome!
Thanks for letting us know that it has worked for you.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.