Firefox: changing opacity-level of the image on the fly

leave comment 
Posted in » CSS, Firefox, General - by Ades on October 22nd, 2007

New to this blog? See our Popular Posts section to get started, we have tons of great articles that can benefit you. Don't miss the upcoming interesting articles, subscribe to our RSS.

If you are viewing this post in Firefox, then you will be able to see variations of the same picture of me (above) with different opacity levels (visibility levels). For the first picture, opacity level is set to 0.1, and for the second 0.3, then 0.5, 0.7 and finally to 1. This is a great feature in Firefox where you can change the opacity of any image on the fly, just by inserting style=”-moz-opacity:0.5″ in any image code (IMG src).

Example: <img src="photo.jpg" style="-moz-opacity:0.7" />

You can change the opacity level from 0.7 to any number between 0 (totally not visible) to 1 (fully visible). Choose anything in between from 0.1 to 0.9 for displaying the image in partial visibility.

How about MouseOver effect?

That is possible too… mouse over to the picture (left) to see what I mean. This effect can also be done on the fly, by adding additional code to the IMG code of any image. Code to be added is onMouseover="this.style.MozOpacity=1" onMouseout="this.style.MozOpacity=0.6". Again, you can set any number between 0 to 1. In this code 1 is the mouse over opacity level of the image and 0.6 is the mouse-out opacity level (when you remove your mouse from the image).

Example: <IMG style="-moz-opacity:0.6" src="photo.jpg" onMouseover="this.style.MozOpacity=1" onMouseout="this.style.MozOpacity=0.6">

So, in this code above, there are three opacity levels:

  1. For the initial state
  2. Mouse-over state
  3. Mouse-out state

Usage Suggestion

You can use this effect on some ads, banners, and images where you do not want your readers to be distracted by them. Using this effect will still allow them to view the images in 100% opacity by just mouse-overing on them.

Too bad it does not work on other browsers. There are many cross-browser javascripts for doing these kind of effects. But usually they require you some sort of installation (uploading additional css, js files..etc). But this one doesn’t! And that is the best thing about it.


Related Posts




7 Responses to “Firefox: changing opacity-level of the image on the fly”

  1. By amirez on Oct 22, 2007

    wow. very nice tricks. thx for sharing ades. that’s why i love FF =)

  2. By Wayne Liew on Oct 22, 2007

    Are you concern about the validity of CSS according to W3C? This is because -moz- is your CSS will make it invalid.

  3. By Sergio on Oct 22, 2007

    In the Rss, the effects dont work, but i see it, wow great Ades! thanks for the tip!

  4. By haQ on Oct 23, 2007

    how o you find this tips ades

  5. By Noclegi Anglia on Oct 23, 2007

    Thanks for very interesting article. I really enjoyed reading all of your posts.
    It’s interesting to read ideas, and observations from someone else’s
    point of view… makes you think more. So please keep up the great work.
    Greetings.

  6. By Ades on Oct 24, 2007

    Thanks Noclegi! I am glad that you enjoyed reading my posts. Hope to see you regularly.

  1. 1 Trackback(s)

  2. Apr 18, 2008: Amirez.com Bersalin Kulit | Amirez.com

Post a Comment