Grey hover over images?

Support
#1

How do I make my images grey when you hover over them with the mouse?

#2

Hello @diytravelhq,

Thanks for asking. :slight_smile:

You want changes to reflect sitewide or a specific section like blog when a image is hovered upon to have a grey effect? Can you please elaborate as that will help us to give you tailored solution? If changes are supposed to affect specific portion of website, please share website URL with us.

Thanks.

#3

I have a section on my homepage with 6 images that I would like the hover/grey effect.

You can check it out here (under Adventures): diytravelhq.com

Thanks

#4

Hi There,

Please add this custom CSS under X > Theme Options > CSS:

/* Disable grayscale on hover */
.x-grey-img img {
  -webkit-filter: grayscale(0);
  filter: none;
  transition: all ease 0.5s;
}

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

After that adding the x-grey-img class to your images:

Hope it helps :slight_smile:

#5

That hasn’t worked unfortunately…

I would like the grey hover effect on my images like the social media buttons on my page have…

#6

Hi there,

This should work:

/* Disable grayscale on hover */
.x-grey-img > img {
  -webkit-filter: grayscale(0);
  filter: none;
  transition: all ease 0.5s;
}

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

Hope this helps.

#7

Thanks so much! I was even able to make it transparent :slight_smile:

#8

You’re most welcome! :slight_smile:

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.