customize feature slider

  • Unknown's avatar

    Hello, can somebody help me to figure out the problem I’m having with feature slider image? I want CSS customization to filter the feature image (showcase) with black and white effect and when the image hovered, it return to colorful image. Is it possible to do so?

    Thank you in advance.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar

    Here’s some code that should work for most browsers, it’s hard for me to test though as this is not yet supported in the current release of Firefox, which is what I use.

    .featured-wrapper img {
      -webkit-filter:grayscale(1);
      -webkit-filter:grayscale(100%);
      -moz-filter:grayscale(100%);
      filter:gray;
      filter:grayscale(100%);
    }
    
    .featured-wrapper a:hover img {
      -webkit-filter:grayscale(0);
      -webkit-filter:grayscale(0%);
      -moz-filter:grayscale(0%);
      filter:none;
      filter:grayscale(0%);
    }

    Let me know how it goes!

  • Unknown's avatar

    Woaw, thanks man. It works perfectly fine on PC browser. But there’s a glitch. It wont work on my phone browser (blackberry). I don’t know how it goes on android or ios, as my other phone is broken now. But thanks man for working it out. Much appreciated.

  • Unknown's avatar

    It seems unlikely to me the filter property would have support on Blackberry. I believe Blackberry uses a proprietary browser that is their own thing. I usually use the http://caniuse.com/ website to look up which browsers support what, but Blackberry doesn’t even get listed there at all.

    Here’s the current browser support for filter effects:
    http://caniuse.com/#search=filter

  • Unknown's avatar

    Update: I use the most recent firefox version. It turns out that the effect only apply to the most recent version of Chrome. Because I use two other android phones (low end & high end). The effect only appear in the high end phone. :sad:

  • Unknown's avatar

    That’s the way it goes when using newer CSS3 properties. Not all browsers have support for them yet!

  • The topic ‘customize feature slider’ is closed to new replies.