[Jayd KParticipant]

Hi there,

I was wondering if you could help me?
I have scoured the forums and sadly all code I have tried doesn’t work.
I am trying to have the images on this homepage turn grey when hovered over/clicked.
I have managed to do it before, but this was a year or so ago, so wondering if the set up has changed since?

My images have a class of ‘greyscale’ and I have tried to use this code suggested by a customer service operator.

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);
}

This is the link so you can see the images. Please help!

[Jayd KParticipant]

Sorry – here is the URL to my website where I am trying to do this. Thanks!

http://www.simplysignspreview.com/gardeningsquad/

[Nabeel AModerator]

Hi there,

Thanks for writing in! Please replace your code with the following code:

.x-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 */
.x-img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0);
}

Cheers!

[Jayd KParticipant]

Hi there,

Sadly that still does not work. Not sure what else to do.
Many thanks for any further advice.

[Paul RModerator]

Hi,

Upon checking, I can see there is a syntax error in your css code preventing it from working.

Please add a close curly bracket before @media (max-width: 979px) {

https://www.screencast.com/t/URiAiDHQ6AN

Then remove the excess } at the end of your code.

https://www.screencast.com/t/EBbrN0RBQzqj

Hope that helps.

[Jayd KParticipant]

Hi there,

Thanks for finding the syntax errors, feel a little silly.
But sadly still doesnt work. Not sure what else I need to do?

[JoaoModerator]

Hi There,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks

[Jayd KParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hi again,

Thank you for providing the credentials. There were few syntax errors in your Custom CSS. I went ahead and fixed it for you. Please clear your browser’s cache and reload the site.

Cheers!

[Jayd KParticipant]

Hi there,

Thanks so much!

[Prasant RaiModerator]

You are most welcome. 🙂

[RahulModerator]

You’re most welcome! 🙂

Feel free to ask us again.

[Author]

Posts