The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Opacity problem on Firefox

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #174085

    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):

    Any suggestion how to fix this?



    Firefox doesn’t support blur atm (see 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="">
      <filter id="blur">
        <feGaussianBlur stdDeviation="3"/>

    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!

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.