Go from grayscale to full color on hover

Hi support,

I have a gallery of images (http://www.1op1keukenadvies.nl/impressies/), and I would like to add grayscale to full color on hover to that.

Now, I found a code that works:

img:hover {
  -webkit-filter: grayscale(0%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(0%);
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(0%);
  -o-transition: .5s ease-in-out;
} 

img {
  -webkit-filter: grayscale(100%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(100%); 
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(100%); 
  -o-transition: .5s ease-in-out;
}

But, this converts every image on the entire website to grey.
Is it possible to only effect the gallery by this code?

I tried the following code as experiment with the page-id, but this didn’t work:

.page-id-1806 img:hover {
  -webkit-filter: grayscale(0%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(0%);
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(0%);
  -o-transition: .5s ease-in-out;
} 

img {
  -webkit-filter: grayscale(100%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(100%); 
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(100%); 
  -o-transition: .5s ease-in-out;
}

I would really appreciate it if you could point me at what code I’ll have to apply to let it only effect my gallery.

Much appreciated.

Hello there,

Try this code:


.gallery img:hover {
  -webkit-filter: grayscale(0%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(0%);
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(0%);
  -o-transition: .5s ease-in-out;
} 

.gallery img {
  -webkit-filter: grayscale(100%);
  -webkit-transition: .5s ease-in-out;
  -moz-filter: grayscale(100%); 
  -moz-transition: .5s ease-in-out;
  -o-filter: grayscale(100%); 
  -o-transition: .5s ease-in-out;
}

Let me know how it goes.

Regards,
Kharis

Hi Kharis,

Works perfectly! Thank you for the quick fix.

Just one additional question: is it possible to not let the greyscale go into effect on the mobile version? As hovering over a picture doesn’t work on mobile screen.

Best,
Marcel

Hi Marcel,

Thank you for updating me. Glad to know the code works for you. To CSS only on a certain device, you can use media query wrapper. So the code would look like this:


@media only screen and (min-width:1025px) {

  .gallery img:hover {
    -webkit-filter: grayscale(0%);
    -webkit-transition: .5s ease-in-out;
    -moz-filter: grayscale(0%);
    -moz-transition: .5s ease-in-out;
    -o-filter: grayscale(0%);
    -o-transition: .5s ease-in-out;
  } 

  .gallery img {
    -webkit-filter: grayscale(100%);
    -webkit-transition: .5s ease-in-out;
    -moz-filter: grayscale(100%); 
    -moz-transition: .5s ease-in-out;
    -o-filter: grayscale(100%); 
    -o-transition: .5s ease-in-out;
  }

}

Regards,
Kharis

Works perfectly :slight_smile: Thanks a bunch.

You’re welcome and best wishes!