Black and white / coloured image effect

• 

  efculturelab · Member · Oct 30, 2014 at 3:15 pm

  • Copy link
  • Add topic to favorites

  Hello,
  I would like to create a Black and White Image effect. In specific, I want that the “mosaic” images (I use Pictorico theme) from black and white become couloured when I pass on it with the mouse.
  Can you help me?

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

• 

  nizamilputra · Member · Oct 31, 2014 at 2:04 am

  • Copy link

  Hi there,

  We can use CSS3 filter, but I’m afraid it won’t work for old browsers. Please add this css to make the change;

  .entry-thumbnail img{
     -webkit-transition: width 400ms;
         -moz-transition: width 400ms;
                   transition: width 400ms;
     -webkit-filter: grayscale(100%);
         -moz-filter: grayscale(100%);
                   filter: grayscale(100%);
  }
  
  .entry-thumbnail:hover img{
     -webkit-filter: grayscale(0);
         -moz-filter: grayscale(0);
                   filter: grayscale(0);
  }

• 

  efculturelab · Member · Oct 31, 2014 at 9:08 am

  • Copy link

  Thank you so much! it looks great! :)

• 

  nizamilputra · Member · Oct 31, 2014 at 9:33 am

  • Copy link

  Oops sorry, please remove width value on transition attribute and change 400ms to 800ms. It should has transition effect.

  It goes like this;

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

  Keep style on .entry-thumbnail:hover img.

• 

  thesacredpath · Member · Oct 31, 2014 at 2:05 pm

  • Copy link

  @nizamilputra, nice job on that, and @efculturelab, it does look and work great!

• 

  nizamilputra · Member · Oct 31, 2014 at 2:34 pm

  • Copy link

  @thesacredpath, thank you Richard!