31609

opacity filter not working in firefox

Question:

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.

Answer1:

First of all what you are doing wrong is

-webkit-filter:opacity=50%

I will only used in browsers with <a href="http://en.wikipedia.org/wiki/Webkit" rel="nofollow">webkit</a> engine like chrome safari etc <a href="http://html5-demos.appspot.com/static/css/filters/index.html" rel="nofollow">more details</a>. In your case mozilla firefox is using a different engine which is <a href="http://en.wikipedia.org/wiki/Gecko_%28layout_engine%29" rel="nofollow">gecko</a>. 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 <a href="http://css-tricks.com/css-transparency-settings-for-all-broswers/" rel="nofollow">this link</a>

Answer2:

Try this opacity :0.5 for firefox

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

Answer3:

for firefox, simply use:

opacity:0.5 <blockquote>

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.

</blockquote>

<a href="http://www.w3schools.com/css/css_image_transparency.asp" rel="nofollow">http://www.w3schools.com/css/css_image_transparency.asp</a>

Answer4:

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;

Answer5:

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; }

Recommend

  • Regex check if given string is relative URL
  • basic jQuery Gallery
  • GetAltTabInfo usage?
  • Unable to get result from stdout with subprocess
  • Unexpected T_FUNCTION?
  • Fastest way to read a text file of strings line by line [duplicate]
  • How do I remove duplicates from an AutoHotkey array?
  • I need result from select statement as multiple data of birth for a single id
  • Why does Redshift need to do a full table scan to find the max value of the DIST/SORT key?
  • How to select multiple jQuery objects?
  • Rewrite part of javascript with C#
  • Android libgdx prefs getting lost
  • Is it possible to “shrink” a PdfPtable?
  • How to get the index of element in the List in c#
  • command line of process by name
  • Cursor in wrong place in contenteditable
  • Is it safe to drop the -webkit vendor prefix from the css3 border-radius yet?
  • Primefaces lazy datascroller calling load twice
  • Repository Browser Only - \"Repository moved permanently to… please relocate”
  • Hide HTML elements without javascript, only CSS
  • AppleScript : find open tab in safari by name and open it
  • Error when parsing timestamp with pandas read_csv
  • Meteor: Do Something On Email Verification Confirmation
  • PHPUnit_Framework_TestCase class is not available. Fix… - Makegood , Eclipse
  • ILMerge & Keep Assembly Name
  • Where to put my custom functions in Wordpress?
  • Javascript convert timezone issue
  • Large data - storage and query
  • WOWZA + RTMP + HTML5 Playback?
  • R: gsub and capture
  • RestKit - RKRequestDelegate does not exist
  • Is there a mandatory requirement to switch app.yaml?
  • AngularJs get employee from factory
  • WPF Applying a trigger on binding failure
  • Benchmarking RAM performance - UWP and C#
  • How to set the response of a form post action to a iframe source?
  • What are the advantages and disadvantages of reading an entire file into a single String as opposed
  • Change div Background jquery
  • Linking SubReports Without LinkChild/LinkMaster
  • Net Present Value in Excel for Grouped Recurring CF