[Michael BParticipant]

Hello dear support team!

I have a problem with some custom CSS in the Essential Grid plugin that suddenly stopped working. The CSS code added a black & white effect to all the grid items of a certain skin (in my case “wilbert”) until you hovered over them, then the items became regularly colored:

.eg-wilbert-wrapper .esg-entry-media img{
  -webkit-transition: 0.4s ease-in-out;
    -moz-transition:  0.4s ease-in-out;
    -o-transition:  0.4s ease-in-out;
    transition:  0.4s ease-in-out;
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.eg-wilbert-wrapper:hover .esg-entry-media img{
    filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

It worked perfectly for quite some time but now has suddenly stopped working. I did not install any additional plugins in the meantime and I did not change anything else. Everything on the website is up to date and I tried emptying all page caches, but it did not help.

Do you have any idea how this problem may be solved? The site in question is http://www.rene-chevalier.de (look at the very first section below the header – there are several company logos which should be greyed out until hovered over).

Thanks in advance!

[Nabeel AModerator]

Hi there,

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.esg-media-poster {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.esg-media-poster:hover {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

Let us know how this goes!

[Michael BParticipant]

Thank you! That did the trick 🙂

Cheers!

[FriechModerator]

We’re delighted to assist you with this.

Cheers!

[seelview89Participant]

Hey support team,
I’m having the same problem as Michael.
I’ve added the code, but i’ve encounter another problem.
Now the images are BW but they are not turning back to color when hover, they only flash and turn back to BW

This is the website http://www.seelview.com portfolio section.

Thank you in advance for anything you may be able to do to assist me with this matter!

[ThaiModerator]

Hi @seelview89,

Please try with this CSS instead:

.esg-media-cover-wrapper .esg-media-poster {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.esg-media-cover-wrapper:hover .esg-media-poster {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

Hope it helps 🙂

[seelview89Participant]

The problem has been solved
Thanks so much!

[RahulModerator]

Glad to hear it.

Let us know if we can help with anything else.

Thank you.

[Author]

Posts