Image saturation on Hover- Home page Modern Portfolio Theme

[mjrouleau]

Hello,
I am trying to make the images appear in grayscale (by using CSS) on the home page, instead of just changing the opacity as it is by default, I would like the images to be in grayscale, then in full color on hover.

I found this part of code in the CSS file, but don't know how to change it.

Line 1394 of style.css
#blog img,
#portfolio img {
margin-bottom: 16px;
margin-bottom: 1.6rem;
opacity: 0.8;
}

#blog img:hover,
#portfolio img:hover {
opacity: 1;
}

I am not a skillful coder, so any help would be greatly appreciated!
Maie-Jacques

http://ateliermacon.dev.horizon-cumulus.ca/

[emasai]

You can use the following, but it might not work in all browsers.
#blog img,
#portfolio img{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%); }

#blog img:hover,
#portfolio img:hover {
opacity: 1;
-webkit-filter: none;
-moz-filter: none;
-o-filter: none;
-ms-filter: none;
filter: none;
}

---

Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.com

[mjrouleau]

Thank you emasai! It works very well in Chrome, but not in Firefox. Anyone knows the code that would make it work on all browsers?

[Author]

Posts