CODEWITHSUNDEEP
jqueryhtmlcss
hotdog1987
hotdog1987

Reputation: 1

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 (version of firefox im using is 20.0.1). For the section "myHobbie" all the images are using the opacity factor (-webkit-filter:opacity = 50%) but when it comes to firefox, i found that it does not support webkit.

Can anyone please give me any other alternative for this so that it works for both firefox and chrome? Also if possible, for IE too.

My website url is: www.srikarshastry.com/index_vertical.html

Thank you in advance.

Upvotes: 0

Views: 6651

Answers (5)

hotdog1987
hotdog1987

Reputation: 1

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

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

Upvotes: 0

arjuncc
arjuncc

Reputation: 3287

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

Upvotes: 1

Tamil Selvan C
Tamil Selvan C

Reputation: 20209

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;

Upvotes: 0

egig
egig

Reputation: 4430

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

Upvotes: 0

Anjith K P
Anjith K P

Reputation: 2158

Try this opacity :0.5 for firefox

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

Upvotes: 0

Related Questions