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?

回答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

回答2:

I've never used this myself but isn't the problem that you're using a webkit filter which wouldn't be supported by firefox. I've done a quick google and it looks like you need -moz-filter: grayscale(100%); see link below.

http://pixelhunter.me/post/25782670606/css3-grayscale

Not sure if the answer below is better for compatibility with older browsers.

来源：https://stackoverflow.com/questions/18682424/my-css-image-hover-effect-does-not-work-in-firefox-or-opera

标签

css

wordpress

class

html