Home Forums Center WordPress Theme Image Greyscale with CSS & re-color on mouse-over?

This topic contains 7 replies, has 2 voices, and was last updated by  findanish 2 years, 4 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #7288

    findanish
    Participant

    Hello,

    I would like to make a little change in the portfolio thumbnails. Is it possible to get a Greyscale image to show color on mouseover/hover with the existing magnifying effect?

    • This topic was modified 2 years, 4 months ago by  findanish.
    #7291

    BWSM
    Keymaster

    Hi, there is not the perfect CSS solution for Greyscale filter.

    you could refer the css code (It doesn’t work for IE 10/11):

    .grayscale {
      /* Firefox 10+, Firefox on Android */
      filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
    
      /* IE 6-9 */
      filter: gray;
    
      /*
        Chrome 19+,
        Safari 6+,
        Safari 6+ iOS,
        Opera 15+
      */
      -webkit-filter: grayscale(100%);
    }
    .grayscale:hover {
      filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
      -webkit-filter: grayscale(0%);
    }
    

    Best, Bwsm

    #7293

    findanish
    Participant

    Its not working. I pasted this code in general settings > Custom Css. I hope thats the correct way.

    #7294

    BWSM
    Keymaster

    No, it doesn’t work on your site. It is a reference code only. It needs to be changed base on your html wrap. Paste your page url which you want to use gray effect please.

    • This reply was modified 2 years, 4 months ago by  BWSM.
    • This reply was modified 2 years, 4 months ago by  BWSM.
    #7297

    findanish
    Participant

    dipengada.com/residential
    dipengada.com/commercial
    dipengada.com/detail
    dipengada.com/photography

    All of the above have/will have portfolios. I need thumbnails to use gray effect, not the individual photos inside each portfolios.

    #7298

    BWSM
    Keymaster
    .standard-list-item-img {
      /* Firefox 10+, Firefox on Android */
      filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
    
      /* IE 6-9 */
      filter: gray;
    
      /*
        Chrome 19+,
        Safari 6+,
        Safari 6+ iOS,
        Opera 15+
      */
      -webkit-filter: grayscale(100%);
    }
    .standard-list-item-img:hover {
      filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
      -webkit-filter: grayscale(0%);
    }
    #7299

    findanish
    Participant

    Its still not working. Do I have to load all images in color or grayscale for it to work?

    #7300

    findanish
    Participant

    Sorry its working, my bad.. Thank you very much again!!

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.