Opacity Filter Not Working In Firefox

I'm new to html and css/jquery. still i managed to create a website on my own using chrome's inspect element and other sources. But, the opacity filter is not working in firefox (v

Solution 1:

First of all what you are doing wrong is

-webkit-filter:opacity=50%

I will only used in browsers with webkit engine like chrome safari etc more details. In your case mozilla firefox is using a different engine which is gecko. For gecko you need to set opacity as

-moz-opacity:0.5;

OR

opacity: 0.5;

The transparency setting for all the browsers are given below.

.transparent {

    /* Theoretically for IE 8 & 9 (more valid) *//* ...but not required as filter works too *//* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    /* This works in IE 8 & 9 too *//* ... but also 5, 6, 7 */filter: alpha(opacity=50);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.5;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.5;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */opacity: 0.5;
}

More details you can refer this link

Solution 2:

Try this opacity :0.5 for firefox

opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */

Solution 3:

for firefox, simply use:

opacity:0.5

IE9, Firefox, Chrome, Opera, and Safari use the property opacity for transparency. The opacity property can take a value from 0.0 - 1.0. A lower value makes the element more transparent.

IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.

http://www.w3schools.com/css/css_image_transparency.asp

Solution 4:

Try this

/* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */filter: alpha(opacity=50);

  /* Firefox */
  -moz-opacity: 0.5;

  -webkit-opacity: 0.5; /* Chrome & Safari *//* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */opacity: 0.5;

Solution 5:

Thank you all. It worked finally. The hover effects were messed up. So, i made changes:

/*Hover effects*/#galleryaimg:hover {
 filter: alpha(opacity=100);
 opacity: 100;
}
/*Default state for brightness has to be specified specifically*/#galleryaimg.brightness:hover {
-webkit-filter: brightness(0);
brightness: 0;
    -moz-brightness:0;
filter: alpha(opacity=100);
opacity: 100;
}