Changing opacity and transparency

Changing Opacity of Picture

Using filter:alpha(opacity) for IE and -moz-opacity for FireFox.

Test placing the cursor over the picture !

Html Code

• The code :

Javascript Code

• changevisibility function :

Creating a filter for black and white picture

• We use the original picture as a background image of a div block :
   

• The original picture within a div block :

• We now define the opacity of the picture, using this inline style :

• The HTML : 

• We now encapsulate this div block, within a container, which use orangered (#ff4500) as background-color :

• And the result :

Fade Effects between Pictures

• Click on the thumbnail to display the picture
  
• Using setTimeout it's possible to change the opacity by increment
• Display the original page, fading-pictures.htm

Gif Picture with Transparency

• Using a gif picture where white (#FFFFFF) is the transparent color.

jpg version of this picture, white background

More Informations

• Title for Pictures
  
• Rounded Corners
• Display Your Pictures with LightBox
• Create borders for your pictures, using Blogger
• Use CSS with Google Sites, to create borders for pictures.
• Insert a Google Gadget (transparent Border) with an iframe or a script, like a Web Element.

One Day - One Label - One Wine