Portfolio hover over

• 

  fioh91 · Member · Jan 24, 2015 at 11:16 pm

  • Copy link
  • Add topic to favorites

  Hello, I’m currently using the Illustratr theme on wordpress. On the portfolio page ( http://misslicko.com/portfolio/ ) when you mouse over a portfolio item it put a grey box and plus sign over. I’ve since been using this code to get rid of this effect

  .portfolio-thumbnail a:before,.portfolio-thumbnail a:after {
  	display: none;
  }

  I really like how it looks now, however I want all portfolio items to show up grey and when you hover over to go to colour. So essentially I want the reverse effect of what I already have.

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

• 

  thesacredpath · Member · Jan 27, 2015 at 5:57 pm

  • Copy link

  Hi, to reverse the greyscale effect on the portfolio images, add this to the very bottom of your custom CSS.

  .portfolio-thumbnail a img {
  filter: grayscale(100%);
  }
  .portfolio-thumbnail a:hover img {
  filter: grayscale(0%);
  }

• 

  fioh91 · Member · Jan 27, 2015 at 8:06 pm

  • Copy link

  Hi, thanks for your response. So now my code looks like this

  /*Portfolio page*/
  .portfolio-title a {
  	font-size: .6em;
  	letter-spacing: .25em;
  	}
  
  .portfolio-thumbnail a img {
  filter: grayscale(100%);
  }
  
  .portfolio-thumbnail a:hover img {
  filter: grayscale(0%);
  }
  
  .portfolio-thumbnail a:before,.portfolio-thumbnail a:after {
  	display: none;
  }

  However it’s not reversing! Sorry I’m an amateur coder!

• 

  fioh91 · Member · Jan 27, 2015 at 8:07 pm

  • Copy link

  http://misslicko.com/portfolio/

• 

  thesacredpath · Member · Jan 30, 2015 at 7:54 pm

  • Copy link

  Hi, I’m seeing the images in your portfolio page going from grayscale to color when I hover over them. Did I misunderstand what you are wanting, or is this working as you wanted now?

• 

  thesacredpath · Member · Jan 30, 2015 at 8:00 pm

  • Copy link

  Ah, wait, it isn’t working in webkit browsers (chrome and safari). Sorry, I should have checked that. :(

  Add the “webkit-filter” stuff to the following two rules (or replace the two rules with the following.

  .portfolio-thumbnail a img {
  	filter: grayscale(100%);
  	-webkit-filter: grayscale(1);
  }
  
  .portfolio-thumbnail a:hover img {
  	filter: grayscale(0%);
  	-webkit-filter: grayscale(0);
  }

• 

  fioh91 · Member · Jan 30, 2015 at 11:23 pm

  • Copy link

  It works perfectly! Thank you so much!!!!!! You’ve made my day :)