[Matt GParticipant]

It’s not working in ANY browser now. HELP!!

[Rue NelModerator]

Hello There,

For more in depth information about CSS filter, please try these links:
http://labs.voronianski.com/css3-grayscale/
http://davidwalsh.name/convert-images-grayscale
https://css-tricks.com/almanac/properties/f/filter/

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Thank you for your understanding.

[Matt GParticipant]

But it was working…just the opacity wasn’t. What can we do to fix it? Or can I just swap images on hover?

[ChristopherModerator]

Hi there,

You should Add HTML code like this :

<a class="image-1" href="#">image1</a>

Then add this CSS:

.image-1{
background:url("put image path here") no-repeat top center;
display:inline-block;
width:50px;
height:50px;
text-indent:-9999px;
}
.image-1:hover{
background:url("put image path here") no-repeat top center;
}

Hope it helps.

[Matt GParticipant]

Thanks for all of your help. Can you tell me what the default image class is that is controlling the opacity on hover?

[Matt GParticipant]

If it’s not “opacity”…whatever the default behavior for an image with a link! 🙂

[ChristopherModerator]

Hi there,

The image element class is .x-img, you can set opacity in your CSS too.

e.g :

.image-1{
opacity:0.5;
}
.image-1:hover{
opacity:1;
}

Can you provide us with exampl, I’m not sure what you trying to achieve now.

Thanks.

[Matt GParticipant]

I’m still trying to achieve the same thing I was in the beginning. I have four icons under the slider at the following page:

http://splash.fireonthemountain-burningboards.com/

The four icons are color, but I want them to display as grayscale until hover. That part is working everywhere but right now. However, when you hover, there is another filter or something that is also being applied on hover that washes out the image. I can’t tell if it’s opacity or contrast, but it’s whatever the default hover behavior is for an image that has a link associated with it.

It would also be nice if I could get it working in IE. 🙁

[ZeshanMember]

Hi Matt,

Yes, it is the default opacity set for images on hover. You can avoid the default hover effect using following CSS code:

a.x-img.grayscale-hover:hover {
    opacity: 1 !important;
}

Thanks!

[Matt GParticipant]

That fixed it!! It was the “!important” piece that I was missing in all my attempts! I owe you a beer!!

Any guidance on how to replicate the same thing in IE? I hear it all went to crap on 10+. 🙁

[Matt GParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Matt,

Grayscale filter isn’t supported by IE 10+ and some other browsers. I tested your website on Firefox 39 on both Windows and Mac and grayscale is working just fine for me, it could be an issue if you are using older version of firefox. There are some hacks you could use for those browser, for example: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html but it would be outside the scope of support we can provide. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!

[Matt GParticipant]

Thanks to you guys for helping out so much!! After a bunch of googling plus the direction here, I’ve got it working on everything except IE 10+ and older versions of Safari!!

In case anyone else neeeds it, here’s the final CSS:

.grayscale-hover { 
  -webkit-filter: grayscale(1);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(wp-content/uploads/2015/08/grayscale.svg#greyscale); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}

.grayscale-hover:hover { 
  -webkit-filter: grayscale(0);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: grayscale(0%);
  filter: none; /* Firefox 4+ */
}

[Paul RModerator]

Thanks for sharing Matt.

Have a nice day!

[Author]

Posts