Black & White to color on rollover Pro Theme

[jecodob]

Howdy:

Is there a way to have images appear black and white when static and color on rollover with the Pro version?

[King]

Hi @jecodob,

On my site i added the following to the theme options css:

/* add a grayscale to colour hover effect when you add a grayscale class to an image */
.grayscale {
filter: gray;
-webkit-filter: grayscale(1);
filter: grayscale(1);
}

.grayscale:hover {
-webkit-filter: grayscale(0);
filter: none;
}

Add your image to the page as normal and for each image, under customise, give it the class of grayscale (you can call his class what you like but just make sure that you change it in the code) and that will give you a B&W image that changes to colour on hover over

Hope this helps.

Chris

[christopher]

Hi Jeremy,

Chris’s answer is spot on. You can add the HTML Class to an Image element using the Customize tab. For more information:

Image | Themeco Docs

To add the CSS code you can go to X/Pro > Theme Options > CSS.

Thank you,

[jecodob]

Thank you!

[friech]

You’re most welcome,

Cheers!