Docs

[eltin7]

Hello,

I need some help for adding a black and white hoover effect on some images. On my webesite at this page : http://mediadome.ro/parteneri , I have uploaded 4 images and I would like what is the way to create this hoover effect. I want those images to be grey and when you put the mouse over them, the images to appear coloured.

Thank you!

[Thai]

Hi There,

Please add the following CSS:

.page-id-1083 .x-img 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;
  filter: grayscale(100%);
}
.page-id-1083 .x-img 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;
  filter: grayscale(0%);
}

Hope it helps 🙂

[eltin7]

That worked great! Thank you a lot 🙂

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts