Thumbnails from black and white to color

• 

  darmahweb · Member · Mar 11, 2015 at 5:39 pm

  • Copy link
  • Add topic to favorites

  Hi, I’m using the ubud theme on my blog, right now I have manually put the featured images in Black and White but I would really love if someone could help me to make them be in black and white and then go to color when hovering.

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

• 

  jami0821 · Member · Mar 11, 2015 at 6:32 pm

  • Copy link

  This should desaturate the image by default:

  .entry-thumbnail img {
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
  }

  And on hover, you can remove the filter:

  .entry-thumbnail img:hover {
      -webkit-filter: none;
      filter: none;
  }

• 

  darmahweb · Member · Mar 11, 2015 at 6:34 pm

  • Copy link

  Thank you so much!!!!

• 

  darmahweb · Member · Mar 11, 2015 at 7:46 pm

  • Copy link

  Is there a way to make the filter go away once I click the thumbnail so that the featured image in the actual post would be in color?

• 

  jami0821 · Member · Mar 11, 2015 at 7:59 pm

  • Copy link

  Oh sure! On your single posts, you’ll want to be more specific with the second CSS block mentioned above and remove the hover psudo element:

  .single .entry-thumbnail img {
      -webkit-filter: none;
      filter: none;
  }

• 

  darmahweb · Member · Mar 11, 2015 at 8:01 pm

  • Copy link

  You’re an angel :)

• 

  jami0821 · Member · Mar 11, 2015 at 8:05 pm

  • Copy link

  Happy to help! :)

• 

  thesacredpath · Member · Mar 12, 2015 at 2:45 am

  • Copy link

  Hi there, I would also suggest adding the Firefox specific rule as well, just to make sure you have everything covered. It would be like the webkit filter, but it would begin with moz like this:
  -moz-filter: ________;

• 

  jami0821 · Member · Mar 12, 2015 at 11:17 am

  • Copy link

  Great point, Richard. I don’t believe there’s a -moz rule for filter though. To bring compatibility to FF 10 or below, you’d need to use SVG filters. Since that represents about 1% of FF users, it thought it might not be worth mentioning.

• 

  thesacredpath · Member · Mar 12, 2015 at 3:44 pm

  • Copy link

  @jami0821, you are right, and there aren’t many on those older versions, but just in case… :)

  And many thanks for you help in the forums. It is greatly appreciated. :D

• 

  jami0821 · Member · Mar 12, 2015 at 4:44 pm

  • Copy link

  It’s been my pleasure. Learning a lot from you too!