Need help? Check out our Support site, then


Make images appear black and white on Parent & Child Pages in Chunk

  1. Hey there,

    I'd like to make my images appear black and white, but to show full colour on image rollover and once you click into the blog.

    So, for example: here on the parent and child pages would show black and white images (except on image rollover, when it's colour), and then here on the post would be full colour.

    Is this even possible?

    The blog I need help with is lornastasiw.com.

  2. You can turn images to grayscale using CSS3.

    I found a good example here:
    http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html

    To apply that example to http://lornastasiw.com/portfolio-4/ or any place in the Mixfolio theme where the images are contained in an element with class="grid", add this to your Appearance → Themes → Customize → CSS panel:

    .grid img {
        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 10+, Firefox on Android */
        filter: gray; /* IE6-9 */
        -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    }

    The filter property is fairly new in CSS and doesn't have support in all browser versions. See this page for a break down:
    http://caniuse.com/#search=filter

    The example page I linked earlier also has a CSS example for removing the grayscale effect on hover and you could apply it the same way I've done with the first example above, but since the Mixfolio theme has some other effects that happen on hover, you may wan to try removing those first.

Topic Closed

This topic has been closed to new replies.

About this Topic