Image saturation on Hover- Home page Modern Portfolio Theme

Community Forums Forums Design Tips and Tricks Image saturation on Hover- Home page Modern Portfolio Theme

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  mjrouleau 4 months, 3 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #96399

    mjrouleau
    Member
    Post count: 1

    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/
    #96409

    emasai
    Participant
    Post count: 648

    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

    #97122

    mjrouleau
    Member
    Post count: 1

    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?

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.