See original thread: http://forum.phpwcms.org/viewtopic.php?f=1&t=24224&p=141005&hilit=data#p141005
It's as easy as this:

<img
    src="img/cmsimage.php/[PRIO]552[/PRIO][PRIO_ELSE]264[/PRIO_ELSE]x0x8/{THUMB_HASH}.{THUMB_EXT}"
    data-grayscale="img/cmsimage.php/[PRIO]552[/PRIO][PRIO_ELSE]264[/PRIO_ELSE]x0x8x0xGS/{THUMB_HASH}.{THUMB_EXT}"
    alt="[CAPTION]{CAPTION}[/CAPTION][CAPTION_ELSE]{IMAGE_NAME}[/CAPTION_ELSE]"
    class="image-grayscale"
/>

Oliver says: “In addition I use a jQuery that filters elements by $('img.image-grayscale') and wraps the <img> tag by <span>. The span gets the $(this).data('grayscale') as CSS background image. Little CSS and opacity: 0 and :hover and you are done.”

https://github.com/iliasiovis/Hoverizr
demo: http://www.iliasiovis.com/hoverizr/
und
https://github.com/GianlucaGuarini/jQuery.BlackAndWhite
example: http://teocomi.com/photos/