WordPress.org

Ready to get started?Download WordPress

Forums

Images from grayscale into colour when hovering (11 posts)

  1. mlcastejon
    Member
    Posted 8 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 Nevins
    Spam zapper & Volunteer Moderator
    Posted 8 months ago #

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

  3. mlcastejon
    Member
    Posted 8 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 8 months ago #

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

    Thanks very much!

  5. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 8 months ago #

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

  6. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 8 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 8 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 8 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 7 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 7 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 7 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