WordPress.org

Ready to get started?Download WordPress

Forums

Images from grayscale into colour when hovering (11 posts)

  1. mlcastejon
    Member
    Posted 11 months ago #

    Hello,

    I'd like to make an effect on some logos on my homepage. I would like to have them in grayscale and then, when hovering, they would be in colour.

    I'm trying to do it only with CSS.

    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);

    But it's not working (and I'm just in the step to make the images into grayscale).

    Any idea why?

    Thanks very much!
    M.

  2. Andrew
    Forum Moderator
    Posted 11 months ago #

    What is the entirety of the CSS that isn't working?

  3. mlcastejon
    Member
    Posted 11 months ago #

    The image is in color so, I don't know exactly why...

    http://91.216.241.2/~cmgiie/ (the logos on the bottom of the page)

  4. mlcastejon
    Member
    Posted 11 months ago #

    Now it works on Chrome but not in Firefox (or Explorer). Any idea of why?

    Thanks very much!

  5. Andrew
    Forum Moderator
    Posted 11 months ago #

    Sounds like you need to clear your browser's cache.

  6. Andrew
    Forum Moderator
    Posted 11 months ago #

    Unless you're viewing it in an old version if IE, are you using a new version (newer than IE8)? If so then press F12 and make sure you're not in compatibility mode.

  7. ModularBase
    Member
    Posted 11 months ago #

    This blog post from May 25, 2012 shows that only Chrome support filters as of now. http://www.html5rocks.com/en/tutorials/filters/understanding-css/#toc-availability

    (not affiliated with this site)

    I did it to my site and it only grayscaled in Chrome.

  8. mlcastejon
    Member
    Posted 11 months ago #

    Thanks, Andrew and ModularBase.

    I've cleaned the cache already and nothing. I'm using Explorer 10 by the way.

    I think it's only going to work in Chrome as you said.

  9. asdevargas
    Member
    Posted 11 months ago #

    Hi!
    It works on Chrome (with transition) and Firefox (without transition) and Safari for Mac (not for Windows), but not working on Explorer 10 (used to work on 6-9...) unless you use SVG images http://jsfiddle.net/KDtAX/105/

    There is a way to force Explorer 10 to render the page with Explorer 9 by adding <meta http-equiv="x-ua-compatible" content="IE=9"> between the head tags in the header.php as it says in http://msdn.microsoft.com/en-us/library/jj676915(v=vs.85).aspx it worked for me :)

  10. mlcastejon
    Member
    Posted 11 months ago #

    asdevargas:

    Thanks very much for comments.

    At the moment, I managed to make it work in Chrome but not in Firefox. About the svg images, should I submit one in grayscale and one in color?

    Thanks,
    Maria

  11. asdevargas
    Member
    Posted 11 months ago #

    Hi Maria,

    I had to update Firefox to the latest version, it seems that on previous one it doesn't work... As for the SVG I didn't try it, I just added the code above between the head tags of the header, but as far as I understand you don't need to submit two images.
    Hope it helped a little...

Reply

You must log in to post.

About this Topic