My CSS Image Hover Effect does not work in Firefox or Opera

My CSS Image Hover Effect does not work in Firefox or Opera

So I'm using a CSS Image Hover Effect on my Wordpress website that works
completely fine in Chrome, however it does not work at all in Firefox or
Opera (nothing happens when I mouseover my image in those browsers).
I've read about possible problems and could it be a conflict with the div
class? I'm not sure.
Here's the CSS:
::-moz-selection {
background-color: #888;
color: #fff;
}
::selection {
background-color: #888;
color: #fff;
}
/*B&W*/
.bw {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
}
.bw:hover {
-webkit-filter: grayscale(100%);
}
.pic {
float: left;
margin: 20px;
overflow: hidden;
}
and here is the HTML:
<div class="bw pic"><a href="http://www.flickr.com/example"><img
class="wp-image-998 alignnone" title="Example"alt="Example"
src="http://www.flick.com/example.jpg" width="550" height="386"
/></a></div>
The example's are just fillers.
Any suggestions on how to fix and optimize this for the Firefox and Opera
browsers?