Hi, my name is Niki Novakov
I have one problem with custom css or with image widget I don’t know exactly, I hope you can help :)
I have double hover option for my clients logos, one is drop shadow /this is on every logo with .hvr-float-shadow/ and the other is opacity /this is on the entire row with .img-opacity/. Everything is working very nice in google chrome and on my mobile version of the site /in both chrome mobile and on my main internet app/ BUT the option for opacity is not working in Mozilla. I’ve tried to deactivate and activate all plugins installed. Tried to clear my browser cache and history etc. still not working. I’ve tested it on 3 PCs.
This is the site: flumenltd.com
If you can help it will be cool. If not it’s not that big of a problem but still it’s better for you to know for that problem.
Best Regards,
Niki
Hi Nikolay,
So the issue here is that your filter isn’t correct.
Please use the following CSS:
Older versions will make use of the moz vendor prefix while newer versions will make use of the standard filter property. The MS filter is pretty useless as nothing pre-Edge has support for it. For IE support you’ll have to make use of something like this. :(
Let me know if this helps.
Hi Alex, thanks for the answer. Unfortunately I have the opposite problem now… it works fine in chrome with this css but in mozilla its only gray scale now
I used this css is it ok or I didn’t understand you :)
.img-opacity {
opacity: 0.9 !important;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}
.img-opacity:hover {
opacity: 1 !important;
-webkit-filter: initial;
-moz-filter: initial;
filter: alpha(opacity=100);
}
Hi Nikolay,
The CSS is slightly different on your website.
For one thing, you use -moz-filter: ignore; rather than -moz-filter: initial; regardless, as mentioned in my previous post – FireFox now relies on the base filter property. As such, filter: alpha(opacity=100); prevents it from working as desired. Use filter: initial; instead. It should be noted that filter: alpha(opacity=100); is an old browser “hack” for IE 5 – 7. Browsers you should not care about.