Support » Plugin: Gallery PhotoBlocks - Visual Photo Gallery » B/W images turn to color with mouse over

  • Resolved Andre

    (@picturebreeze)


    Hi,
    I would like to show black and white images that turn to color when I move the mouse over an image.
    Does anybody know how to do this?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author GreenTreeLabs

    (@greentreelabs)

    Hi Andre,

    you can use the following code to add in the Custom CSS box:

    img.pb-image {
      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"); /* Firefox 3.5+ */
      filter: gray; /* IE6-9 */
      -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    }
    
    img.pb-image:hover {
      filter: none;
      -webkit-filter: grayscale(0%);
    }
    Andre

    (@picturebreeze)

    Many thanks for that but I’m getting an error message “Markup is not allowed in CSS.” when trying to save the code in the custom CSS section.

    Plugin Author GreenTreeLabs

    (@greentreelabs)

    Can you provide a screenshot? However, you can add that code also in the custom CSS box of your theme.

    Andre

    (@picturebreeze)

    Andre

    (@picturebreeze)

    And here’s another screenshot including the message behind that yellow exclamation mark icon: http://andrebabiak.com.w014d7e4.kasserver.com/temp/screenshot1.png

    Plugin Author GreenTreeLabs

    (@greentreelabs)

    The custom code should be pasted inside the Custom CSS box of the plugin.

    1. Edit a gallery
    2. Click the “Customizations” tab
    3. Paste the code inside the “CUSTOM CSS” box

    Sorry if I wasn’t clear.

    Andre

    (@picturebreeze)

    Ah ok, yeah I didn’t quite get that.
    Anyway, I’ve put it into the correct place now but it doesn’t quite do what I wanted.

    It is b/w now but it doesn’t turn into color on mouse over.

    This is how it looks like right now: http://andrebabiak.com.w014d7e4.kasserver.com/product-photography/ (it’s gray but no mouse over effect)

    This is what I actually want to achieve: https://andrebabiak.com/ (move the mouse over the images).

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘B/W images turn to color with mouse over’ is closed to new replies.