Okay
  Public Ticket #149243
Portfolio hover effect - greyscale
Closed

Comments

  • Richard started the conversation
    January 18, 2014 at 4:14pm
    Hello I wish to add a greyscale effect to the portfolio page, so it's greyscale until hovered over - Something like this http://www.platige.com where would I add my code to do this? Thanks, Richard
  • Bannett replied
    January 31, 2014 at 7:42pm

    This would be cool.  Was there any option?

  • Richard replied
    January 31, 2014 at 7:44pm

    No reply to this one. I decided not to use it anyway.

  •  1,092
    ThemeNectar replied
    February 3, 2014 at 11:21am

    Hey Richard, somehow this must have fallen through the cracks - really sorry!

    For anyone else interested it would indeed take some custom development, but with css3 techniques it's possible to do without that much work. http://labs.voronianski.com/css3-grayscale/

    Cheers :)

  • Mike replied
    March 17, 2014 at 4:27pm

    Howdy!

    Put the following snippet in your style.css. This should do the trick.

    .portfolio-items .col .work-item:hover img {


	-webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg#greyscale); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}
  • Richard replied
    March 17, 2014 at 4:29pm

    Thanks Mike. I'll give that a try

  •  9,016
    Tahir replied
    March 17, 2014 at 5:23pm

    Hey Mike!

    Thanks for helping out. 

    Cheers

    ThemeNectar Support Team 

  •  1
    BENOIT replied
    March 18, 2014 at 7:03pm

    deleted post

  •  1
    BENOIT replied
    March 18, 2014 at 7:05pm

    deleted post

  •  9,016
    Tahir replied
    March 19, 2014 at 5:55pm

    Hey!

    Add this into the Custom CSS box located in your Salient Options panel:

    .portfolio-items div.col {
	background-color: #000;	
}

    Cheers

    ThemeNectar Support Team 

  • Groeihackers replied
    June 7, 2018 at 4:55pm

    Add this in CSS box:

    .portfolio-items .col .work-item img {
      filter: gray !important; /* IE6-9 */
      -webkit-filter: grayscale(1) !important; /* Google Chrome, Safari 6+ & Opera 15+ */
      filter: grayscale(1) !important; /* Microsoft Edge and Firefox 35+ */
    }

    /* Disable grayscale on hover */
    .portfolio-items .col .work-item:hover img {
        filter: none !important; /* IE6-9 */
      -webkit-filter: grayscale(0) !important; /* Google Chrome, Safari 6+ & Opera 15+ */
      filter: grayscale(0) !important; /* Microsoft Edge and Firefox 35+ */
    }