[Solved] Opacity problem on Firefox

[Tx3]

I have an image with overlay div. The idea is that this overlay will darken the image element (opacity 0.5) on hover. Currently works smoothly on Chrome, but on Firefox it will show gray div (black overlay with opacity) instead of display content behind it.

Try it first with Chrome to see what I mean and then on Firefox (I’m using version 30):
http://codepen.io/ttamminen/pen/wfCyz

Any suggestion how to fix this?

Thanks,
-Tatu

[MDMueller]

Firefox doesn’t support blur atm (see https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Gecko_notes) and your CSS refers to a SVG-filter, that doesn’t exist.

You could try adding something like this to your HTML:

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="blur">
    <feGaussianBlur stdDeviation="3"/>
  </filter>
</svg>

[Tx3]

Mr Mueller, you’re absolutely right. I added the missing svg element and now it works smoothly on the Firefox.

I was focused on the opacity, z-index etc. and forgot to check blur thingy.

Thank you!

[Author]

Posts