Docs

[Nikhil Ravishanker]

Hi,

I’m looking to add a hover effect to an image, where the image is in grayscale by default, but turns to color.
Is there some way I can accomplish this?

Thanks, in advance!

[Thai]

Hi There,

#1] Please add the following CSS under Customizer > Custom > Global CSS:

img.grayscale {
  filter: gray; /* IE6-9 */
  filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}

/* Disable grayscale on hover */
img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0);
}

#2] After that add the grayscale CSS class to the class field of your images:

http://i.imgur.com/lC2olKW.png

Hope it helps 🙂

[Author]

Posts