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

  • Author
  • #1229713


    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


    You can turn images to grayscale using CSS3.

    I found a good example here:

    To apply that example to 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=\'\'><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:

    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.

The topic ‘Make images appear black and white on Parent & Child Pages in Chunk’ is closed to new replies.