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

Question

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?

Answer 1

Still there is no Support for CSS filter on firefox, check here

But there is one workaround for grayscale on firefox use this

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");

You can see the working demo here on JSFIDDLE