ChrisFo on "[Theme: Customizr] Customiz'it CSS: wp-post-image grayscale hover"

I'm trying to add a grayscale effect on the following code (example):

<section class="tc-thumbnail span4">
    <div class="thumb-wrapper ">
        <a class="round-div " title="News" href="news"></a>
        <img class="attachment-tc-thumb wp-post-image" width="270" height="210" alt="News" src="Logo.png"></img>
    </div>
</section>

I'd like to make the image grayscale, reverted to color by hovering over. I tried several CSS styling codes (see one code source). One sample:

img {
filter: gray; /* IE6-9 */
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
img.hover {
filter: none;
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
}

I have two problems:
1) when introducing the code for Firefox (SVG filter), the images are not shown anymore in Firefox.
2) in Chrome the filter to grayscale works, but if I hover over, the image does not show up in colores.

I think there is some CSS style collision, but I'm not able to figure it out.