Docs

[Nuera]

So this should be a pretty simple thing, but I want to make sure I get it right. I have a hover animation class (hover-home) that I would like to reverse. Right now the image is grayscale and then turns to color when the user hovers over the image. I would like to reverse this so that the image goes to grayscale upon hover instead.

Here is the working code I have right now:

/* Add'l Hover Class */
a.hover-home img {
    transition: all 0.2s ease;
    margin: 0 auto;  width: 200px; display: block
}
a.hover-home:hover img {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>&l…1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

a.x-img:not(.x-img-thumbnail):hover {
    opacity: 1;
}

/* Anchor Image Home Class */
a.hover-home img {
    transition: all 0.2s ease;
    margin: 0 auto;
    width: 200px;
    display: block;

   filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'>&l…1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/></filter></svg>#grayscale");
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

a.hover-home:hover img{
  filter: none;
  -webkit-filter: none;
  filter: none;
}

Though I imagine this is just a rearrangement of the same code here, I’m not actually sure.

Thanks so much!

[Rupok]

Hi there,

Thanks for writing in! Is it working on your site? I am not sure where you actually need help as the code seems complete and fine. Would you clarify a bit more and provide the URL where you have implemented this?

Cheers!

[Nuera]

Oh sure. Yes this is working code, but I want to reverse the action.

Currently:
Inactive: grayscale -> Hover: color

Desired:
Inactive: color -> Hover: grayscale

Thank you so much, Rupok 🙂

[Rupok]

Hi there,

Thanks for clarifying. You can try this :

a.hover-home img{
    margin: 0 auto;
    width: 200px;
    display: block;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
   -webkit-filter: none;
   filter: none;
}

a.hover-home:hover img {
   filter: url("data:image/svg+xml;utf8,&l…1 0 0 0, 0 0 1 0 0, 0 0 0 1 0'/>#grayscale");
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

Update us with URL if it doesn’t work.

Cheers!

[Nuera]

This is perfect!

I greatly appreciate it Rupok 🙂

[Rahul]

Glad we were able to help you out.

Let us know if we can help with anything else.

Thank you.

[Author]

Posts